How to Add Hover Text Over an Image in Squarespace (3 Ways)

How to add hover text over an image in Squarespace depends on the block: an Inline image block has a built-in “Caption Overlay on Hover” setting, a Slideshow gallery block shows titles and descriptions on hover, and a gallery section in 7.1 can show captions on hover through its own settings. Every other case (a Fluid Engine image block, a text block over a photo, a service card that reveals a description) needs a few lines of CSS, and the snippet below does it with a text block stacked on an image block. Each method is here with its steps, then the CSS, then the one caveat that decides whether you should use hover text at all: phones have no hover, so the text must also be reachable without it.

Method 1: the built-in caption overlay on hover

1. Add or edit an Image block and open its Design tab.
2. Choose Inline. (Squarespace’s hover effects guide notes that image blocks in Fluid Engine sections do not support hover captions, so this works in classic sections and in blog posts.)
3. In the Content tab, set Caption to Caption Overlay on Hover.
4. Hover over the block, click “Write a caption here” and type the text.
5. Save. The caption appears on hover on desktop and stays hidden on touch devices.

Style it under Site Styles (image caption tweaks). The limitation is the block type: in a Fluid Engine section the Inline design is not available, which is why most 7.1 sites end up on method 3.

Method 2: gallery blocks and gallery sections

• Slideshow gallery block: add titles and descriptions to each image in the gallery’s content tab; in the Design tab, set them to show on hover. Only the Slideshow design supports hover in gallery blocks.
• Portfolio pages (7.1): the Hover layouts list project titles and reveal each project’s image on hover, which is the quickest route to a hover-reveal project list.

Method 3: how to add hover text over an image in Squarespace with CSS

Stack a Text block directly on top of an Image block in Fluid Engine (drag the text block over the image; Fluid Engine allows overlap). Find both block IDs with the block ID method, then in Website, Website Tools, Custom CSS:

/* Fluid Engine wraps each block in .fe-block-ID; target the wrappers */
.fe-block-TEXT-ID { opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.fe-block-IMAGE-ID:hover + .fe-block-TEXT-ID { opacity: 1; }

/* darken the image on hover so white text reads */
#block-IMAGE-ID img { transition: filter .3s ease; }
#block-IMAGE-ID:hover img { filter: brightness(0.5); }

/* touch devices: always show the text */
@media (hover: none) {
  #block-TEXT-ID { opacity: 1; }
  #block-IMAGE-ID img { filter: brightness(0.6); }
}

In Fluid Engine each block sits inside a wrapper whose class is fe-block- plus the block’s ID (the part after block-), and those wrappers are siblings, which is why the rule targets them rather than the #block elements. The + selector needs the text block to come right after the image block in the page code, which is the order Fluid Engine writes when the text block was added after the image. If the reveal does not fire, the order is reversed: delete and re-add the text block, or swap the two IDs. The @media (hover: none) rule is the important one: it shows the text permanently on phones, where there is no hover, so mobile visitors are not left with a photo and no caption.

Method 4: a hover card for services or team members

For a grid of images that each reveal a name and a line of text, the same idea applies to a section’s image blocks with a class-based rule, so you write the CSS once. Give each card the same structure (image block, then text block), collect the section ID, and use:

section[data-section-id="SECTION-ID"] .fe-block:has(.sqs-block-html) { opacity: 0; transition: opacity .3s; pointer-events: none; }
section[data-section-id="SECTION-ID"] .fe-block:has(.sqs-block-image):hover + .fe-block:has(.sqs-block-html) { opacity: 1; }
@media (hover: none) { section[data-section-id="SECTION-ID"] .fe-block:has(.sqs-block-html) { opacity: 1; } }

This is the pattern the paid tools (SquareKicker’s hover mode, Will Myers’ plugins) package with a visual editor; the SquareKicker write-up describes the same stack of a text block behind or over an image. The tools are worth it for a site with many hover cards; for two or three, the CSS is quicker.

Should you use hover text at all?

Most of the traffic to a small business site is on phones, and the only phone hover is a tap, which follows the link or does nothing. So the rule for every method above is that the hover state is a desktop bonus, and the page must make sense without it, which is the same principle as the website design mistakes around mobile.

Why is the hover text not working?

• Fluid Engine image block with Inline caption: not supported; use method 3.
• Testing on a phone or tablet: no hover exists; check on a laptop, and add the touch fallback.
• CSS applied but nothing happens: wrong block ID, or the text block precedes the image in the code; swap the selector.
• Text visible all the time: the opacity: 0 rule lost to a Squarespace style; add !important.
• Text unreadable over the image: add the brightness filter, or a semi-transparent background on the text block via #block-TEXT-ID { background: rgba(0,0,0,.5); padding: 12px; }.
• Hover flickers: the text block sits partly outside the image; make it the same size or smaller. More snippets of this kind are in the Squarespace CSS cheat sheet.

Hover reveals are the kind of detail that makes a Squarespace portfolio feel custom, and the touch fallback is what keeps it honest.

Frequently asked questions