Gallery Image Overlay with Caption on Hover

What You'll Create

Gallery images that reveal a colored overlay and centered caption text when visitors hover. The image dims behind a customizable color wash while the title, description, or links fade smoothly into view at the center of the image.

The Problem It Solves

Stacked gallery blocks in Fluid Engine display captions below or beside images, not as hover overlays. Creating that portfolio-style reveal where text appears over a dimmed image requires custom styling that Squarespace doesn't offer natively.

Perfect For

Portfolio thumbnails, Service showcases, Team member cards, Product category grids, Feature highlights

What Makes This Different

This technique makes the gallery images themselves interactive rather than just displaying static captions. The overlay color can be customized per image based on where it links, so different sections of your site can have coordinating hover colors. The caption text remains clickable through the overlay, maintaining full functionality while adding visual polish.

Details

• Section Type: Fluid Engine

• Code Type: CSS

• Prerequisites: Fluid Engine section, Stacked Gallery block with captions enabled

• Toolkit Title: Overlay Text on Hover (Fluid)

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support