Centered Text Over Image Caption

What You'll Create

Image captions that appear centered over the image rather than below it. The text overlays the image at 50% vertical and horizontal position, creating a title card effect.

The Problem It Solves

Squarespace image captions only appear below images by default. If you want text overlaid on an image, you'd typically need to add the text in image editing software or use complex positioning. This CSS solution uses the native caption field.

Perfect For

Hero images with titles, Gallery overlays, Feature images, Category banners, Promotional images, Portfolio thumbnails with project names.

What Makes This Different

CSS absolute positioning moves the caption wrapper to the center of the image using transform translate. The image itself can be constrained to a specific width. Simple and effective for creating text-over-image layouts without extra blocks.

Details

• Section Type: Fluid & Classic

• Code Type: CSS

• Prerequisites: Image Block with caption enabled

• Toolkit Title: Centered Text Over Image

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