If you used Squarespace 7.0, you had access to built-in gallery overlay effects. Hover over an image, and a semi-transparent overlay with a title and description would appear. Squarespace 7.1 removed this feature entirely. Galleries now display images with no hover interaction at all, which is a problem for photographers, designers, and anyone who uses image grids as a portfolio.
The solution is CSS pseudo-elements. Using ::before and ::after, you can create overlay effects that rival what 7.0 offered natively, with more control over colors, transitions, and layout.
Why 7.1 Dropped Overlays
Squarespace 7.1 was a ground-up rebuild focused on a simplified design system. Many advanced features from 7.0 were cut in favor of a more streamlined editor. Gallery overlays were one of the casualties. The official recommendation is to use lightbox mode or link your images to individual project pages, but neither replicates the elegant hover-to-reveal pattern that portfolio sites depend on.
The CSS approach works because Squarespace's gallery items use a consistent wrapper structure. Each image in a grid gallery sits inside a .gallery-grid-item container, and the image itself is rendered as a background image on a .gallery-grid-item-wrapper element. This gives us a predictable target for pseudo-elements.
Building the Overlay with CSS
The core technique uses ::before to create a color overlay layer that sits on top of the image. You position it absolutely, set it to fill the entire container, and then control its visibility with opacity transitions on hover.
/* Gallery item container setup */
.gallery-grid-item {
position: relative !important;
overflow: hidden !important;
}
/* The overlay layer */
.gallery-grid-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.35s ease;
z-index: 1;
pointer-events: none;
}
/* Show overlay on hover */
.gallery-grid-item:hover::before {
opacity: 1;
}
/* Optional: scale image on hover */
.gallery-grid-item:hover .gallery-grid-item-wrapper {
transform: scale(1.05);
transition: transform 0.5s ease;
}
.gallery-grid-item .gallery-grid-item-wrapper {
transition: transform 0.5s ease;
}The pointer-events: none on the overlay is critical. Without it, the pseudo-element blocks clicks on gallery items, which breaks lightbox functionality and any links you have attached to your images. This single property makes the overlay purely visual while keeping the underlying image interactive.
Adding Text to the Overlay
A plain color overlay is useful on its own, but many portfolio sites want to show a project title on hover. In Squarespace 7.1, gallery items can include titles and descriptions. These are rendered inside a .gallery-grid-item-info element that Squarespace hides by default.
/* Reveal the built-in title on hover */
.gallery-grid-item .gallery-grid-item-info {
position: absolute !important;
bottom: 20px !important;
left: 20px !important;
z-index: 2;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.35s ease, transform 0.35s ease;
color: #fff !important;
}
.gallery-grid-item:hover .gallery-grid-item-info {
opacity: 1;
transform: translateY(0);
}This CSS unhides the title that Squarespace already rendered in the DOM, positions it in the bottom-left corner of the image, and fades it in with a subtle upward slide on hover. The z-index: 2 places it above the overlay layer (which is at z-index 1), so the text sits on top of the darkened background.
Generate Your Overlay CSS
Getting overlay colors, opacity levels, transition timings, and text positioning right takes trial and error. Our Gallery Hover Overlay Generator lets you configure every parameter visually, preview the effect in real time, and export production-ready CSS that works with Squarespace 7.1 gallery blocks.
For more visual customization, see our guide to navigation hover effects or explore our full Squarespace CSS tool suite.
