Image Mask Tutorial

Image Mask Tutorial Summary

For this website, we have applied an image mask on the feature images. This was done to hide the cropped rounded edges of the old website and to provide “eye-candy.”

Creating a CSS class

I created a CSS rule called .themask

.themask .elementor-image img {
width: 100%;
-webkit-mask-image: url(https://nascarspeedpark.com/wp-content/uploads/2021/01/sketch.png);
mask-image: url(https://nascarspeedpark.com/wp-content/uploads/2021/01/sketch.png);
-webkit-mask-size: 100% 100%;
mask-size: 400px 600px;
}

Where this is placed

The following image below can be created and replaced if needed. Upload as a .png file. Replace the URL in the CSS under Elementor > Site Settings > Custom CSS.

To apply this to any image in Elementor go to the advanced tab and in the top section look for the CSS class field.

To apply this in a post or other WP block editor content, it will be located here.