Image Cascading

< All Topics
Widget Used
 Image Cascading
Knowledge Required
Advanced

Image Cascading widget is mainly used for creating layered images and cascading layouts with sleek animation effects. You can create Layer Masking, Popups, Parallax Hover, Magic Scroll, Hover Tilt and many such unique Image cascading effects.

Pro tip
We have created a lot of image cascading examples for you to follow upon. Just take them as an inspiration and create some awesome image cascading effects.

How to use the Image Cascading Widget of The Plus Addons For Elementor

The Image Cascading widget is an advanced widget. Let’s understand how to use this widget in the tutorial below.

Table Of Contents

General Steps


Search for the Image Cascading widget from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.

1. Content

Image Cascading 

Add Multiple Cascading Sections

Layer Position

Desktop:

Left (Auto / %)

Set Left (Auto / %) for desktop.

Right (Auto / %)

Set right (Auto / %) for desktop.

Top (Auto / %)

Set Top (Auto / %) for desktop.

Bottom (Auto / %)

Set Bottom (Auto / %) for desktop.

Width

Set the width for desktop.

Tablet:

Responsive Values

Slide to edit the responsive values.

Left (Auto / %)

Set Left (Auto / %) for a tablet.

Right (Auto / %)

Set Right (Auto / %) for a tablet.

Top (Auto / %)

Set Top (Auto / %) for a tablet.

Bottom (Auto / %)

Set Bottom (Auto / %) for a tablet.

Width

Set the width for tablet.

Mobile:

Responsive Values

Slide to edit the responsive values.

Left (Auto / %)

Set Left (Auto / %) for a mobile.

Right (Auto / %)

Set Right (Auto / %) for a mobile.

Top (Auto / %)

Set Top (Auto / %) for a mobile.

Bottom (Auto / %)

Set Bottom (Auto / %) for a mobile.

Width

Set width for a mobile.

Layer Type

Select the Layer type here, either text or an image.

Image Select

Select the Image you want to add here.

Image Size

Select the Image size here.

Extra Options:

Continues Effect

Select the continuous effect you want to use here. You will get 8 different effects to choose from.

Mask Image Shape

Slide to add a mask image shape.

Mask Image

Use PNG image with the shape you want to mask around Media Image.

Magic Scroll

Slide to enable and edit magic scroll.

Tooltip

Slide to enable Tooltip and edit the tooltip options like Content, description, text color.

Special Effect

Slide to enable and set colors for the special effect.

Parallax Move

Slide to enable and edit the Parallax Move position.

On Hover Tilt

Slide to enable and edit the On Hover Tilt.

Link /Popup

Select if you want to add either a link or a popup.

Overlay Background

Set the color for the overlay background here.

Box Shadow

Edit the Box Shadow settings here.

Opacity

Set the Opacity for the Image Cascading widget.

Transform CSS

Enter the CSS code here.

Border Radius

Set the Border radius for the Image Cascading widget.

Responsive Visibility

Slide to enable responsive visibility on tablet, mobile and desktop separately.

Styling

Minimum Height 

Set the Minimum Height for the Images.

SlideShow

Slide the button right to enable Slide Show.

SlideShow Type

Select the Slide Show type.

Overflow Hidden (Desktop/Tablet/Mobile) 

You can set up overflow hidden option if your section is going our and having an unwanted scrollbar in all devices separately.

2. Advanced

Want to get nerdier with our widgets? Check out the Advanced Tab. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?