How to Display Poster Image Titles on Hover in Squarespace

Code Toolkit

Jan 16

What You'll Create

Poster-style images in Squarespace where the title and overlay stay completely hidden until someone hovers. On hover, the title smoothly fades in with a subtle overlay effect behind it. A half-second transition keeps the reveal feeling polished rather than jarring.

The Problem It Solves

Squarespace's poster image layout always shows titles and overlays by default. There's no native option to hide them until hover. This can make image-heavy sections feel cluttered, especially when you want the visuals to speak for themselves first.

Perfect For

Portfolio image grids, Service showcases, Team member displays, Product galleries, Creative agency homepages

What Makes This Different

This technique starts your poster images in a "clean slate" state—no titles, no overlays visible. Only when someone hovers does the title fade in smoothly over half a second. The overlay gets just a hint of transparency to make text readable without obscuring the image. You apply this to specific sections, so you can mix hidden-title and always-visible-title images on the same page.

Details

Code Type: CSS
Prerequisites: Image Block set to Poster layout style
Toolkit Title: Poster Image: Title 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

Get Access to Standout Squarespace →

Animation & Effects

Squarestylist Support