Masking takes a rectangular photo and shows it through a shape — a circle, a star, a brush stroke, a logo outline. In a cascade it is what stops the layers looking like a pile of boxes.
Each layer of the Image Cascading widget from The Plus Addons for Elementor has its own Mask Image Shape switch, so you can mask one layer and leave the rest square.
To check the complete feature overview documentation of The Plus Addons for Elementor Image Cascading widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
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.
- You need the mask shape as a file: a PNG with a transparent background or an SVG. The opaque part of the file is what stays visible; everything transparent is cut away.
Mask a Layer
- In the Image Cascading section, open the item you want to mask.
- Set Layer Type and add the content. The switch is offered on Image and Text Content layers; we tested it on an image.
- Scroll to Extra Options and switch on Mask Image Shape.
- Upload or pick your shape in the Mask Image field that appears.
- Update the page and look at the front end.
The Result
The same photo twice: plain on the left, and on the right with a transparent star PNG in Mask Image and a shadow typed into Image Shadow.
Image Shadow
Image Shadow, just below Mask Image, is a plain text field, not a colour picker. Type a CSS shadow value into it — the placeholder shows the format, 1px 1px 4px rgba(0,0,0,0.75) — and the widget applies it as a CSS drop-shadow().
A
drop-shadow()follows the masked outline, so the shadow traces the star or the brush stroke instead of drawing a rectangle around it. That is the whole reason it is here and not a normal box shadow.
How It Behaves
- The mask is stretched to fill the layer, so a shape whose proportions differ from the photo’s will distort. Crop the mask file to roughly the same aspect ratio as the image.
- Masking is per layer. Switch it on for one item and the others are untouched.
- The mask file is used for its shape only. Its colours are ignored; only opaque against transparent matters.
Limitations
- There is no size, position or repeat control for the mask, and no built-in shape library — you supply the file.
- Image Shadow is unvalidated text. A typo produces no shadow and no warning.
- A mask with soft, semi-transparent edges gives a soft edge on the layer, which can look blurry at large sizes. Use a hard-edged file for crisp shapes.
Troubleshooting
The layer disappeared completely
The mask file has no opaque area — usually a JPG, which has no transparency at all, or an SVG without a filled path. Use a PNG with a transparent background.
The shape is squashed
The mask is stretched to the layer’s box. Make the mask file the same shape as the image, or adjust the layer’s Width.
Nothing happened
Check that Mask Image Shape is on and that Mask Image holds a file. With the switch on and the field empty the layer is left as it was.
