Hovering Captions on Images in a Masonry Gallery (Squarespace 7.1)
Squarespace 7.1 is all about masonry galleries as they create a casual, magazine-like look. But a lot of people wish to display image captions as a tooltip, when hovering over an image—not showing all the time under an image.
Squarespace do not provide a built-in toggle option for hover-only captions in their Masonry grids, this effect however can be achieved through CSS alone. It allows for a clean solution while not breaking responsiveness or layout flow.
How Captions Work in Masonry Galleries
In Squarespace 7.1:
Masonry galleries use system-generated markup
Captions are rendered as text overlays or below images
Visibility and position are controlled by default gallery styles
There’s no built-in “hover-only caption” option for masonry layouts
Because of this, custom CSS is required.
What This Solution Does
With the solution below:
Captions are hidden by default
Captions appear smoothly when hovering over an image
The masonry layout remains intact
No JavaScript is required
Desktop behavior is improved without affecting mobile usability
Step 1: Open Custom CSS
Go to: Website → Pages → Custom Code → Custom CSS
Step 2: Hide Captions by Default
.gallery-masonry-wrapper .gallery-masonry-item .gallery-caption {
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
This hides captions while keeping them available for hover.
Step 3: Show Captions on Hover
.sqs-gallery-design-masonry .gallery-item:hover .image-caption {
opacity: 1;
}
Now captions appear only when the user hovers over an image.
Optional: Improve Caption Readability
If captions overlay images, add a subtle background:
.gallery-masonry-wrapper .gallery-masonry-item .gallery-caption {
background: rgba(0, 0, 0, 0.6);
color: #ffffff !important;
padding: 10px !important;
}
This improves contrast on bright images.
Target a Specific Gallery Only (Best Practice)
If you want hover captions on one masonry gallery only:
Inspect the section
Copy the data-section-id
Scope your CSS
section[data-section-id="YOUR-SECTION-ID"]
.gallery-masonry-wrapper .gallery-masonry-item .gallery-caption {
opacity: 0;
transition:0.3s !important;
}
section[data-section-id="YOUR-SECTION-ID"]
.gallery-masonry-wrapper .gallery-masonry-item:hover .gallery-caption {
opacity: 1;
}
This avoids affecting other galleries.
Mobile Behavior (Important)
Hover effects don’t work on touch devices. For mobile:
Captions will remain hidden
Or you can force them visible on mobile
Example:
@media only screen and (max-width: 767px) {
.sqs-gallery-design-masonry .image-caption {
opacity: 1;
position: relative;
background: none;
color: inherit;
}
}
This ensures captions remain accessible on mobile.
Common Mistakes to Avoid
Relying on hover-only captions for mobile users
Not adding contrast for overlay text
Applying global CSS without scoping
Over-animating captions
Hiding captions completely without accessibility fallback
Final Thoughts
Captions that reveal themselves on hover within a Masonry gallery are an embellishment, not something that's inherent in Squarespace 7.1. With a couple of targeted CSS rules, you’ll be able to write out a fairly competent structure using semantic HTML and never leave that HTML until the really end.
The magic formula is in striking the right balance between visual clarity, accessibility, usability, and responsiveness.
FAQ: Hover Captions in Masonry Galleries (Squarespace 7.1)
-
Yes. CSS alone is sufficient.
-
No. It only affects caption visibility.
-
Hover does not apply on touch devices—use a mobile fallback.
-
Yes, by targeting the section ID.
-
Yes. These are lightweight CSS effects.
