1. Home
  2. Docs
  3. Xpro Elementor Addons Pro
  4. Widgets
  5. Image Masking

Image Masking

Introduction

Users these days are tired of seeing square and circled images. So, to make your web design stand out and more appealing than the others. You need to go out of the box. That is why we at Xpro have come up with an Image Masking widget that offers more than 55 different designs and shapes to make sure your web images become more interesting for site visitors. You can add a hue, saturation, and blur effects to your images. You can also apply appealing animations using this widget. Our Xpro Image Masking widget for Elementor supports all types of image formats like JPG, PNG, GIF, and WEBP.

Requirement

You need to install and activate the pro version by Xpro Elementor Addons to use this amazing widget.If you already have the plugin installed, just make sure the Simple Portfolio Widget is ‘Enabled’, so you can find it in the Elementor editor.

To enable the widget, simply follow these steps:

Step 1

Click on the Xpro Addons option available on the WordPress Dashboard Menu.

Step 2

From the Xpro Addons Dashboard, click on the Widgets Tab, find the Image Masking widget, and finally, toggle the button ON to enable it.

How to Add Image & Style using Xpro Image Masking Widget

Our Image masking widget for Elementor allows you to add your favorite images and style them the way you want. You can instantly transform the images into highly engaging and appealing content. Just by using our amazing features available in this module of image masking. Let’s try those features!

Step 1

After Dragging and dropping the Image masking widget on the desired page. Choose your image from the media library or you can directly upload it from your desktop. You can also change the image size and add a link to your image using the highlighted options.

Step 2

Now by clicking the mask image options in the content section, you can choose your favorite style from more than 55 different shapes and sizes of Professionally Designed Vector Shapes and you can also add your favorite customized designs, so now you don’t have to worry about using the same square images all the time.

Step 3

You can also use the position and size option to make your image more prominent to the users. If you are image is smaller than the mask shape you are using so you can use the repeat option to make it more visible.

Step 4

Now you can go to the Style Tab to add additional highlights to your image. You can change the length, width, and alignment of the image. You can also add a blurring effect by changing the Opacity to make it more efficient according to the required size and design of your website.

How to Add Animation to the Image in Elementor

Now, if you want to add an animation or present your image as a gif, you can toggle from normal to Hover Option. There you can select the transition time by scrolling the bar. Select the type Hover Animation from the drop-down menu.

The End Results will look like this, I have made this animation using 3 secs transition time and pulse shrink animation from the drop-down menu of Hover Animation. You can use your favorite according to the requirement of your site.

How to Add Blur or Hue Effects to the Image in Elementor

While using this amazing widget, you can even add your custom filter to the images. By clicking the CSS Filters a drop-down menu will occur, you can use the options to add blur, hue, saturation effects. You can use these features to make your object more glowing or dark according to the theme of your design.

How to Apply Floating Effect on Your Image

Xpro Elementor Addons lets you add floating effects on almost all widgets. Head over to our detailed guide on how to add a floating effect for your WordPress websites.

How to Apply Scroll Effect to Your Image

Add beautiful scroll effect on any Xpro Elementor widget. Head over to our detailed guide on how to apply the scroll effect on your WordPress websites.

How to Apply Mouse Effect to Your Image

Xpro Elementor Addons lets you add mouse effects on almost all widgets. Head over to our detailed guide on how to add a mouse effect for your WordPress websites.

That’s it from the Image Masking Widget. Head over to Xpro Image Accordion widget for Elementor and explore more exciting features/effects for the images of your website.

How can we help?