(Squarespace) Hover Slideshow Full Image – Change to Color

[tuanphan]

To make Color Block appear over Slideshow Full Image on Hover, like this.

You can use this code to Custom CSS.

.gallery-fullscreen-slideshow-list {
.gallery-fullscreen-slideshow-item-wrapper:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #dc0081;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}
.gallery-fullscreen-slideshow-item-wrapper:hover:after {
    opacity: 1;
}
}

To apply it on a specific Slideshow Full Image, you can find Slideshow ID

Then use CSS code like this.

section[data-section-id="67dd3a9717fa056b7d85a62d"] .gallery-fullscreen-slideshow-list {
.gallery-fullscreen-slideshow-item-wrapper:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #dc0081;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}
.gallery-fullscreen-slideshow-item-wrapper:hover:after {
    opacity: 1;
}
}

To change color, you can edit this line

[maxim (Maxim Smith)]

Thanks, @tuanphan
Helped my website!