Gallery images in Squarespace 7.1 can be enhanced with a CSS overlay that appears on hover. Use a pseudo-element on the gallery item wrapper to create a color overlay with a smooth transition.
The overlay can show the image title or just provide a visual hover effect. The key selectors are .gallery-grid-item or .sqs-gallery-design-grid-slide depending on your gallery type.
.sqs-gallery-design-grid-slide {
position: relative;
overflow: hidden;
}
.sqs-gallery-design-grid-slide::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.sqs-gallery-design-grid-slide:hover::after {
opacity: 1;
}
/* Scale image on hover */
.sqs-gallery-design-grid-slide img {
transition: transform 0.4s ease !important;
}
.sqs-gallery-design-grid-slide:hover img {
transform: scale(1.05);
}Generate gallery overlays with our Gallery Hover Overlay toolTry it free →
