Sticky Stacking Gallery

What You'll Create

A gallery where images stack on top of each other as you scroll, with each image remaining sticky until the next one scrolls into view. Creates a layered, card-stack effect with subtle shadows and rounded corners.

The Problem It Solves

Squarespace galleries either scroll images off screen or use slideshows with arrows. When you want that modern, app-like feel where images layer on top of each other as you scroll - similar to iOS card interfaces - you need CSS sticky positioning applied to gallery items.

Perfect For

Project showcases, Image storytelling, Product reveals, Process demonstrations, Layered visual narratives.

What Makes This Different

Each image in the gallery stays in place while scrolling, causing it to 'stick' at a set point while the next image scrolls up and layers on top. Shadows create depth between cards, and rounded corners soften the edges. The effect works in both Fluid and Classic editors with slightly different selectors, and includes mobile-specific positioning adjustments.

Details

• Section Type: Fluid & Classic

• Code Type: CSS

• Prerequisites: Stacked Gallery Block or multiple Image Blocks in sequence

• Toolkit Title: Sticky Gallery

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