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