# How do I add a stacked images effect?

<Embed url="https://youtu.be/wJsu7WJLZVU?si=xMjsMIkSg_kONhfa" />

A stacked images effect — where images overlap as visitors scroll — makes a section feel more interactive and lets you highlight several visuals without taking up much space. Here's how to build it.

## Steps

<Stepper>
  <Step title="Add and configure the Stack container">
    1. Add a [Stack](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/stack-elements) element to your page to act as the container for your images. Size it based on your purpose — for a banner-style section, size it accordingly.
    2. Select the Stack and, in the Inspector panel's Design tab under **Auto layout**, set **Direction** to **Vertical** so the images stack on top of each other.
    3. Add some **Gap** between the images, and set **Padding** inside the container for breathing room (if needed).
  </Step>

  <Step title="Add and style your images">
    1. Drag [Image](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/image) elements into the Stack container.
    2. Size each image to fill the container's width.
    3. Style for extra impact: add a box shadow (under Effects) for subtle depth, and adjust the border radius for rounded corners. Under General settings, you can also set **Load priority**, **Image shape**, or add a **Click action** if needed.
  </Step>

  <Step title="Create the overlapping effect">
    1. Select each image, go to the Design tab, and change its position from Static to **Sticky**.
    2. Adjust the **Inset** value for each image — this sets the point where the image locks in place while scrolling. Using a different inset per image is what creates the staggered, overlapping stack.
  </Step>
</Stepper>

## Best practices

* Not limited to banner sections — resize the Stack container to fit wherever you want the effect on the page.
* If an image isn't locking in place where you expect, double-check its Inset value — that's what determines the exact scroll point.
* Keep the number of stacked images reasonable (3–5) — too many can make the section feel cluttered or slow to scroll through.