Image Reveal on Text Hover with Scale Animation

What You'll Create

Images in Squarespace that start hidden (or scaled down) and smoothly emerge when users hover over nearby text. The effect combines fade-in with a subtle scale transformation, creating that satisfying "reveal" moment seen on high-end portfolio sites. The image appears to grow into view from behind the typography.

The Problem It Solves

Standard Squarespace layouts show images at full visibility all the time. When you want text to be the hero with images as supporting elements, you need custom interaction. This technique lets you hide images until the user shows interest by hovering, keeping your layout clean while rewarding curiosity with visual content.

Perfect For

Portfolio pages where project names should lead with images as teasers, product reveals that build anticipation, creative service showcases with dramatic presentation, artist or designer portfolios with editorial aesthetics, any layout where you want text-first hierarchy with visual rewards.

What Makes This Different

This version (v2.0) uses positioning combined with scale transformation for a more dynamic reveal than simple fade alone. The image doesn't just fade in—it grows from a smaller scale (typically 0.8 or 0.9) to full size, creating depth and movement. The timing curves are customizable, and the technique includes responsive handling so the effect works appropriately across devices.

Details

• Section Type: Fluid & Classic

• Code Type: CSS

• Prerequisites: Image Block positioned near or behind text elements. Section ID for targeting.

• Toolkit Title: Image Reveal on Hover v2.0

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