Create Gallery Captions on Hover in Squarespace 7.1

Squarespace Tutorial
Written By Walid Hasan

As a designer or photographer, or a creative with a Squarespace 7.1 website, you might need a sleek image gallery that shows captions only when a user hovers over an image.

Today, we’ll take a look at how to make gallery captions show on hover/x without a plugin – it’s easy!

What’s the Goal?

Squarespace galleries have captions under or over images by default, and in a perfect world, you’d have to go to the effort of turning captions on.

You want this instead:

  • Captions are hidden by default

  • They fade in without a glitch only when you hover over a photo

  • The effect is responsive from one screen to another, and your design will remain minimal and professional.

Why Use Hover Captions?

Here’s why hover captions are a no-brainer for a lot of websites:

  • A clean and distraction-free layout

  • Brings some zap to your gallery

  • Emphasizes captions when users interact with it

  • Ideal for portfolios, project presentations, or product images

How Does It Work?

We’ll add a tiny bit of CSS that:

  • Hides captions initially

  • Positions them inside the image

  • Displays them with a smooth fade-in/fade-out effect.

It’s a solution for the default Squarespace Gallery Block (Grid style) and doesn’t use any custom code blocks or JavaScript-ish stuff.

Step 1: Add a Gallery Block

In Squarespace 7.1:

  1. Go to the page where you want the gallery.

  2. Click the + Add Block → Select Gallery → Choose Grid Layout.

  3. Upload your images.

  4. Add captions to each image under Image Editor → Caption.

Step 2: Add the Custom CSS

Now go to:

Pages → Custom code → Custom CSS

Paste this code:

Copied!

/* Gallery Captions on Hover */
.gallery-caption-content {
  transform: translateY(0);
  transition: all 0.3s ease;
  position: absolute;
  bottom: 30px;
  left: 0;
  padding: 12px;
  background: rgba(0, 0, 0, 0.6); /* Optional dark overlay */
  color: #fff;
  text-align: center;
  z-index: 2;
}
.gallery-grid-item:hover .gallery-caption-content {
  transform: translateY(-10px);
}

Save the changes and preview your gallery.

What This CSS Does

✔ Hides the caption using opacity: 0
✔ Reveals it on hover with a gentle upward movement
✔ Keeps the caption centered and easy to read
✔ Adds a dark transparent background to improve contrast

Customization Tips

Want to tweak the design? Here are a few options:

Change background transparency

Copied!

background: rgba(0, 0, 0, 0.4);  /* lighter */

Make captions appear in the center

Copied!

.gallery-caption-content {
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
}

Speed up or slow down the hover effect

Copied!

transition: all 0.5s ease-in-out;

Adjust vertical position on hover

Copied!

transform: translateY(-20px);

Mobile Responsiveness

This method works beautifully on desktop and mobile. If needed, you can adjust the caption size or position using media queries to make it mobile-optimized.

Final Thoughts

Adding a hover caption to your Squarespace 7.1 gallery is a small but mighty design choice that brings a little more sophistication and interaction to your imagery. Whether you’re displaying photographs, design work, or even product imagery, this clean effect ensures you keep things lean but also gives users an easy way to dive in and interact with your content. ​

Best of all, it doesn’t rely on JavaScript, external plugins, only native gallery blocks, and some CSS. (As well as control over how and when its captions will be shown.) You’ve now got full control over how your captions look and how they are displayed, taking both form and function of your portfolio or website to the next level.

Frequently Asked Questions (FAQ)

Q1: Will this hover effect work on all gallery options of the squarespace 7.1?

A: This has been solved for Gallery Blocks with Layouts of Grid layouts. And the other types, like carousels or slideshows, most of the time don't have the same hover behavior without special configurations.

Q2: Is the hover caption effect mobile compatible?

A: It does work on mobile, too. Captioning usually shows when users tap an image on a touch device. You might also want to tweak spacing and font size with mobile design-specific adjustments.

Q3: Is it possible to modify the appearance of the caption as it is presented?

A: Absolutely. You have options for where to position the caption (bottom, center), background color, text color, and how long it takes the animation to run. These design adjustments allow you to tailor the effect to complement your brand’s aesthetic.

Q4: What if I want captions to fade instead of slide?

A: That’s possible! You can adjust the delivery style of the captions to slide-in, fade-in, or scale-with-sign to match your preferred visual look. The effects can also be personalized easily with some CSS.

Q5: Will any of these things impact SEO or accessibility?

A: No. The captions are retained in the site’s HTML, so they are still accessible to search engines and screen readers. This is only a visual modification.