Image Masking with Best Elementor Widget or Custom CSS

4 Ways to Implement Image Masking in Elementor

Let's explore 4 ways on how you can implement image masking on your WordPress Elementor website.

Sometimes you want to give your website design that certain something. One way to do this is to mask the images on your website. In this article and the accompanying video tutorial, I will show you four ways to implement image masking on your website. Furthermore, this article shows you how to work with the Elementor setting Custom CSS. In this context, we will also answer the question: What is the Selector?

How to Implement Image Masking in Elementor

Below are 3 free and one premium option on how to mask images on your WordPress site. Let’s start with the premium solution.

1. Image Masking with HappyAddons

The easiest way to use the image masking feature is with the help of the Elementor extension HappyAddons*. In my opinion, HappyAddons is one of the best Elementor Addons out there. From my point of view, it’s the addon with the highest amount of unique features.

HappyAddons - the best Elementor Addon

To use the Image Masking feature, you need the Pro version of the plugin. After installing the Pro version, you will find the appropriate setting below the image.

Image Masking with HappyAddons
Using HappyAddons you can mask your images with just a few clicks

I also like about the Elementor addon HappyAddons that it extends Elementor’s default functionality rather than just adding new features. That’s why you can use the image masking feature also on the image widget from Elementor.

But you can also mask your images for free, as the following three options show.

2. Image Masking with Custom CSS and Blobmaker

To mask our images, we will pick up a web design trend of 2020 – the round and elegant shapes. More precisely, we are talking about so-called blobs. A great web tool that allows you to create such blobs easily and for free is blobmaker.app.

Create SVG blobs for free with Blobmaker.app
Create SVG blobs for free with Blobmaker.app

Just hit the refresh button a few times until the desired blob shape appears, download the SVG (Scalable Vector Graphics) file and upload it to your website. If you have trouble uploading SVG files to your WordPress Elementor site, please refer to the following FAQ:

How to Safely Enable SVG Support in Elementor

Solve the error SVG file is not allowed for security reasons. With the following steps, you will be able to upload SVG files safely to your Elementor site.

Now all you have to do is copy the following CSS code into the Custom CSS field in the Advanced tab of the image element:

selector {
 -webkit-mask: url(http://test.el-mentor.de/wp-content/uploads/2020/03/blob-shape.svg); 
 -webkit-mask-size: 88%;
 -webkit-mask-position: top center;
 -webkit-mask-repeat: no-repeat;
   mask: url(http://test.el-mentor.de/wp-content/uploads/2020/03/blob-shape.svg); 
   mask-size: 88%;
   mask-position: top center;
   mask-repeat: no-repeat;
}

Don’t forget to replace the URL in the CSS mask property with the URL of your previously uploaded blob.

Important Things to Note
Things to Note

The Custom CSS feature is only available to Elementor Pro users. If you do not have the Pro version, you can also insert the CSS code into the Additional CSS field in the Customizer. However, you can’t use the Selector there. In this case, you should assign a CSS class to target the element correctly via the Customizer.

If you write more of your own CSS code, I would recommend that you maintain the code in a central location. As an Elementor user, you can use the Custom CSS in the Theme Style section. All other WordPress users can use their CSS code either in the Customizer or in the style.css file of their child theme. Through central maintenance, conflicts in the CSS code can be found and resolved more easily.

What is the Selector?

If you already know a little bit about CSS, you might be wondering which website element is addressed with the “selector”? The selector is an easy way for all Elementor users to address the selected element via CSS. Otherwise, you would first have to assign a CSS class or a CSS ID and call this class or ID via custom CSS.

To easily include the styling options made by users, each Elementor widget is wrapped in several div-containers. The outermost div-container is also called the wrapper element. This wrapper is the element that the selector targets.

The video tutorial shows in more detail what the selector is and what is referred to as a wrapper element.

3. Image Masking with Custom CSS and Icons

Instead of blob shapes, you can, of course, also use standard icons to mask your images. Two helpful and free web tools are Nucleo and The Noun Project.

Nucleo App - Free Icons to mask your images in Elementor
Nucleo App – Free icons to mask your images in Elementor

What is the ideal file type for Image Masking?

With the Nucleo App, you can download the icons in SVG, PNG, or PDF. So which type should be used for image masking? The SVG format is best suited for image masking. This format can be scaled to any size without any loss of quality. But you can also use a PNG file without background. To avoid the picture or icon becoming pixelated when upscaling, you should make sure that the file format is large enough.

The next step is to upload the icon to your website. Now you can copy the URL of the icon and paste it into the CSS “mask” property. The rest of the CSS code is the same as in the Blobmaker example.

4. Image Masking / Clipping with Text (Image in Text)

What applies to shapes and icons also applies to normal text. We can also use the CSS “background-clip: text” property to display an image in a text.

Image Clipping - Display image in text
Image Clipping – Display image in text

The CSS Code required is as follows:

selector .elementor-heading-title{
    background: url("http://test.el-mentor.de/wp-content/uploads/2020/03/f2.jpg");
    background-position: 0 0;
    background-size: 80%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -o-background-clip: text;
    background-clip: text;
    transition: background-position 1.5s;
}

selector .elementor-heading-title:hover{
    background-position: 0 50%;
}

In this example, we are using the selector as well. But since we want to address the child element in this case (the H2 tag within the Elementor Heading widget), we have to add the CSS class elementor-heading-title. Again, you should replace the URL of the background with the URL of your image. And don’t forget to set the text color in the style tab to transparent.

Conclusion

As you can see, there are several ways to mask the images in Elementor and WordPress and give a professional touch to your website’s design. The beautiful thing about it is that you can create significant effects for free with a little bit of CSS or with a bit of copy & paste. As shown in this article, free web tools help you get the resources needed to mask your images. All Elementor Pro users can quickly enter the CSS Syntax in the Custom CSS field and, by using the selector, save themselves the trouble assigning additional CSS classes and IDs.

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Video Tutorial

YouTube

By loading the video, you agree to YouTube's privacy policy.
Learn more

Load video

Thank you for sharing:

Leave a Comment

Your email address will not be published. Required fields are marked *

Please confirm that you have read and accepted our privacy policy.

All links marked with (*) are affiliate partner links.

Table of Contents
Deal Expires: 2021-06-20

Happy Addons Pro

Deal Name: 18th Birthday of WP
HappyAddons Review
up to
45%
OFF
Helpful Links to Related Posts

Elementor Deals

Deal Expires: 2021-06-20

Happy Addons Pro

Deal Name: 18th Birthday of WP
HappyAddons Review
up to
45%
OFF
Deal Expires: 2021-06-30

PowerPack Addons for Elementor Pro

Deal Name: Limited Time Offer
PowerPack Addons for Elementor Pro
up to
40%
OFF

Related Posts

Elementor Addons Performance Test
Elementor Performance

Elementor Addons Performance Test

Have you ever asked yourself what impact a specific WordPress plugin or an Elementor addon has on your site’s performance? Well, I did. Here are the results.

Read Post »

Related Addons