Expand List Items on Hover

What You'll Create

A list section where items expand dramatically on hover, revealing more content while other items compress. Each item fills the full viewport height, with background images and text that transform as visitors interact.

The Problem It Solves

Squarespace's list sections have limited hover effects - items might change color or show shadows, but they don't dramatically resize to reveal hidden content. This technique creates an accordion-like experience triggered by hover, perfect for showcasing multiple services or projects in a single, interactive section.

Perfect For

Service category displays, Team member introductions, Portfolio category previews, Feature highlights, Interactive showcases.

What Makes This Different

The layout uses flexbox to create items that dynamically resize - the hovered item expands to 50% width while others compress. Each item becomes a full-height panel with its background image, title, and description revealed on hover. The transition is smooth with a custom easing curve, and the entire item is clickable through an invisible button overlay.

Details

• Section Type: Fluid & Classic

• Code Type: CSS

• Prerequisites: List Section with 4 columns, Section anchor set to #expandhover, Layout set to Content First, Zero vertical padding

• Toolkit Title: Expand List 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