Hover Follow Title Spotlight Effect

Code Toolkit
Written By Squarestylist Support

What You'll Create

A sophisticated spotlight effect in Squarespace where hovering over portfolio items dims all other titles to gray with reduced transparency, while the active item maintains full color and visibility. Creates a dramatic focus effect.

The Problem It Solves

Squarespace's Hover Follow portfolio layout shows image previews on hover, but all titles remain equally visible. This technique adds visual hierarchy by de-emphasizing non-hovered items.

Perfect For

Portfolio showcases, project galleries, team member displays, service listings, creative agency sites.

What Makes This Different

Detects when any portfolio item is hovered, then dims all titles to gray at 50% transparency. The active item restores full styling with elevated stacking order for proper layering.

Details

  • Section Type: Fluid Engine

  • Code Type: CSS

  • Prerequisites: Portfolio section set to Hover Follow layout

  • Toolkit Title: Hover Follow Title Spotlight

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 →
Squarestylist Support
Previous

Global Styles Starter Kit
Next

Split Image Layout with Full Content