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.
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.
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.
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
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.
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.
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.
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.
