Gallery Title Fade on Hover

What You'll Create

Gallery block images with titles centered over them that smoothly fade out when visitors hover, revealing just the image. Creates an elegant reveal interaction that invites exploration.

The Problem It Solves

Squarespace's default gallery title positioning can feel awkward or block important parts of images. This technique positions titles perfectly centered over images and creates a sophisticated hover interaction where titles disappear to show the full image.

Perfect For

Portfolio showcases, Photography galleries, Product displays, Team member grids, Any image collection with titles.

What Makes This Different

CSS absolute positioning centers titles over images regardless of image size. Hover states control opacity transitions for smooth fade-out effects. The video icon is hidden by default and appears on hover for video content, creating consistent interaction patterns.

Details

• Section Type: Fluid & Classic

• Code Type: CSS

• Prerequisites: Gallery block set to Grid layout with titles enabled

• Toolkit Title: Grid Gallery Block: Title Fade-out on Hover

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