---
title: "How to Create Image Cascading Effect in Elementor?"
url: https://theplusaddons.com/docs/create-image-cascading-effect-in-elementor/
date: 2024-05-13
modified: 2026-09-18
lang: en
author: "Aditya Sharma"
description: "An image cascade is a set of photos that overlap each other in a deliberate, staggered arrangement — the kind of collage you normally build by hand with absolute positioning...."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Create-Image-Cascading-Effect-in-Elementor_-1024x536.jpg
word_count: 665
---

# How to Create Image Cascading Effect in Elementor?

## 

- The Image Cascading widget from The Plus Addons for Elementor Pro uses one widget to build overlapping photo layers, with each layer positioned by four percentage sliders.
- The Plus Addons for Elementor ships Image Cascading only in the Pro version, and the widget appears under The Plus Addons > Widgets after it is installed and activated.
- Styling requires a Minimum Height because every layer position in % is measured against the widget box, and a too-small height cuts off layers.
- Responsive Values on Tablet and Mobile let Image Cascading set different Left, Top, and Width values for smaller screens, while the last repeater item stays on top.

An image cascade is a set of photos that overlap each other in a deliberate, staggered arrangement — the kind of collage you normally build by hand with absolute positioning.

The **Image Cascading** widget from The Plus Addons for Elementor does it with one widget: each image is a layer, and you place each layer with four percentage sliders.

*To check the complete feature overview documentation of The Plus Addons for Elementor Image Cascading widget, [click here](https://theplusaddons.com/docs/cascading-image-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/image-cascading/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — Image Cascading ships only in the Pro version of The Plus Addons for Elementor. The widget file is not in the free plugin at all, so it does not appear in the widget list without Pro.- **Widget to enable:** **Image Cascading**, under **The Plus Addons > Widgets**. Search for it and turn the toggle on, then reload the Elementor editor.- **Where the settings are:** drop the **Image Cascading** widget on the page. The **Content** tab holds three sections — **Image Cascading** (the layers), **Image Animation** and **Styling**.- **How it is built:** each item in the **Add Multiple Cascading Sections** repeater is one layer. Layers are absolutely positioned inside the widget, so they can overlap.

## Build the Cascade

- In **Styling**, set a **Minimum Height** for the widget. Every layer position in % is measured against this height, so set it before you place anything.- Open the **Image Cascading** section and open the first item under **Add Multiple Cascading Sections**.- Leave **Layer Type** on **Image** and choose your photo in **Image Select**. **Image Resolution** sets which registered size is used.

- Under **Layer Position**, use **Left (Auto / %)** and **Top (Auto / %)** to place the layer. Both start on **%**, so their sliders are already there. **Right (Auto / %)** and **Bottom (Auto / %)** start on **Auto** — switch one on only if you would rather anchor that edge.- Set **Width** to control how much room the layer takes. It is a maximum width, so the image never grows past it.- Click **+ Add Item**, repeat for the next photo, and give it **Left** and **Top** values that push it partly over the first one.- Add as many items as you need, then update the page and look at it on the front end.

![The first cascading item with Layer Type set to Image, Image Select and Image Resolution](https://theplusaddons.com/wp-content/uploads/2026/09/imgcascading-layer-type.webp)

> *Percentages are measured against the widget box, so the same numbers look different at other screen sizes. Open the **Tablet** and **Mobile** tabs, switch on **Responsive Values** and set the positions for those devices too.*

## The Result

Three layers at **Left** / **Top** of 5/8 %, 28/26 % and 50/44 %, each with **Width** 42 %, gave this cascade on the published page:

![Three photos overlapping in a diagonal cascade on a published page](https://theplusaddons.com/wp-content/uploads/2026/09/imgcascading-result-cascade.webp)

![An image cascade of overlapping photos built with the Image Cascading widget](https://theplusaddons.com/wp-content/uploads/2024/05/cascading-image-image-cascade-demo.png)

## How It Behaves

- Layers are drawn in the order they appear in the repeater: the last item is on top.- **Width** is a maximum. A narrow image keeps its own size; a wide one is scaled down.- Switching an edge back to **Auto** removes that edge from the layer's CSS, it does not set it to zero.

## Limitations

- The widget does not grow to fit its layers, because they are absolutely positioned. A layer that is cut off means **Minimum Height** is too small.- There is no z-index control. To move a layer forward or back, drag the item to a different place in the repeater.

## Troubleshooting

### Nothing shows on the page

Set a **Minimum Height** under **Styling**. Without one the widget box has no height for the layers to sit in.

### All the images are stacked in the same spot

A new item starts from the default position. Give each item its own **Left** and **Top** values.

### The layout breaks on a phone

Open the **Mobile** tab of **Layer Position**, turn on **Responsive Values** and set positions and widths for that screen.

## Related Docs

- [Cascading Image Widget: Settings Overview](https://theplusaddons.com/docs/cascading-image-widget-settings-overview/)- [How to Create Image Cascading Slide Show in Elementor?](https://theplusaddons.com/docs/create-image-cascading-slide-show-in-elementor/)- [How to Add Mask on Images in Elementor Image Cascading Widget?](https://theplusaddons.com/docs/add-mask-on-images-in-elementor-image-cascading-widget/)

## Frequently Asked Questions

**Q: What do I need before creating an image cascading effect in Elementor?**
A: The Image Cascading widget is only available in the Pro version of The Plus Addons for Elementor, so the free plugin alone will not show it in the widget list. The widget also needs to be enabled under The Plus Addons > Widgets before you use it. That matters because the cascade is built from absolutely positioned layers, and without the Pro widget active there is nothing to place or overlap.

**Q: Why are all my cascading images showing in the same spot?**
A: That usually happens when a new item is left at its default position. Each layer needs its own Left and Top values inside Layer Position, otherwise every image starts from the same coordinates and stacks on top of the first one. The repeater order also matters, since layers are drawn in sequence and the last item ends up on top.

**Q: How do I stop an image cascade from breaking on mobile?**
A: Mobile needs its own positioning because the percentages are measured against the widget box, not against a fixed canvas. Open the Mobile tab for Layer Position, turn on Responsive Values, and set positions and widths for that screen. That keeps the cascade readable when the same desktop percentages would push layers into awkward overlaps on a phone.

**Q: What is the best way to size an image cascade so nothing gets cut off?**
A: Set a Minimum Height in Styling before placing layers, because every layer position is measured against that height. The widget does not grow to fit absolutely positioned layers, so if an image gets clipped, the Minimum Height is too small. A good rule is to size the box first, then place the layers so their overlap stays inside that space.

**Q: How are overlapping images layered in The Plus Addons for Elementor Image Cascading widget?**
A: Layer order follows the repeater order: each item becomes one layer, and the last item sits on top. There is no z-index control in this widget, so stacking is managed by dragging items higher or lower in the repeater. That makes ordering important when one image needs to visually cover another in the final collage.

**Q: Where can I find more help for Image Cascading settings and related effects?**
A: The main settings reference is [Cascading Image Widget: Settings Overview](https://theplusaddons.com/docs/cascading-image-widget-settings-overview/), which covers how the widget is configured inside The Plus Addons for Elementor. If you want a different effect, there is also [How to Create Image Cascading Slide Show in Elementor?](https://theplusaddons.com/docs/create-image-cascading-slide-show-in-elementor/) and [How to Add Mask on Images in Elementor Image Cascading Widget?](https://theplusaddons.com/docs/add-mask-on-images-in-elementor-image-cascading-widget/).