OoohBoi Elementor AddOns

Image Mask

A little bit about

The image mask lets you display certain portions of an image on the screen while hiding the rest. Anything that’s 100% black in the image mask reveals a portion of the target image while transparent parts of the image mask hide it. Image mask can be any black & transparent SVG file. You can apply the image mask effect to the Image Widget or the Background Overlay of the Section or the Column element.

Figure 1 – Image Widget Options

Figure 2 – Section / Column Options

Key features

Key drawbacks

Works with:

Image Widget and any Background Overlay

How it works?

Image Widget (fig. 1)

When in Editor, select the target Image Widget, open the Style tab and expand OoohBoi Image Mask panel. Upload the mask image (should be SVG file type!) and play with options.

Background Overlay (fig. 2)

Select the target Section or Column, open the Style tab and expand Background Overlay panel. All the Image Mask options will be available under the default Background Overlay panel options. Upload the mask image (should be SVG file type!) and play with options.

Requirements

Elementor 2.7 or above

How to install?

Just like any other WordPress plugin. How exactly? Like this.

Addon Examples

Possible applications

Bear in mind that this is the tip of the iceberg only. The true limitation is actually your own creativity.

Image Mask applied to the column Background Overlay, with the "COLOR" blend mode and the column background image.

Background Overlay Image Mask

When applied to the Background Overlay, masked area can be re-positioned vertically and/or horizontally.

The example file is an importable Elementor template.
If you don’t know how to import the template, here’s the article that might help.

Useful Info

It's good to know...

Where to buy?

Image Mask addon for Elementor is available at Gumroad only. Buy once, update forever, use anywhere.

* Not including taxes!

Online Docs

Installation and usage instructions are available online.