Layered Stacking List Section with Hover Reveal

What You'll Create

List Section items in Squarespace that stack vertically with overlapping cards that slide up on hover, revealing the item beneath. Each card has a solid background color and shifts upward when hovered, creating a layered, interactive accordion-like effect. The layout transforms into a standard column on mobile.

The Problem It Solves

List Sections display items in standard grids or columns. When you want a more dynamic, layered presentation where items physically overlap and respond to interaction, custom CSS is required. This technique creates visual depth and rewards user exploration.

Perfect For

Service offerings with layered reveals, team member spotlights, portfolio category browsing, feature showcases with depth, pricing tier presentations, any list needing visual hierarchy through stacking.

What Makes This Different

Creates overlap using spacing techniques, with smooth hardware-accelerated animations on hover. Each item gets a background color that can change on hover, and layers are managed properly for correct visual stacking. The layout reorganizes content so title, image, and description appear inline on desktop while collapsing naturally on mobile.

Details

• Section Type: Fluid Engine

• Code Type: CSS

• Prerequisites: List Section set to Simple design with single column. Anchor ID set to layeredlist.

• Toolkit Title: Layered List Section

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