(Squarespace) Hover Slideshow Simple Image – Change to Color

[tuanphan]

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

You can use this code to Custom CSS.

.gallery-slideshow {
.gallery-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-slideshow-item-wrapper:hover:after {
    opacity: 1;
}
.gallery-slideshow-item img {
    object-fit: cover !important;
}
}

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

Then use CSS code like this.

section[data-section-id="67dd3a9717fa056b7d85a62d"] .gallery-slideshow {
.gallery-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-slideshow-item-wrapper:hover:after {
    opacity: 1;
}
.gallery-slideshow-item img {
    object-fit: cover !important;
}
}

To change color, you can edit this line