This may sound cliché, that an image is worth a thousand words. Nevertheless, we have admitted that image has that much power. There are so many ways to create an image more interesting. Masking is one of the methods that we can use to make the image stand out.
In short, image masking uses a shape or object to cut off or hide portions of the image. You can adjust a specific part of your image while leaving the rest untouched. This article will show you how to add an image mask in Divi.
Steps to Add Image Mask in Divi
Step 1: Add New Section
Go to the Divi Builder editor and then create a row with three columns. We want to add the Code module for each column in this example. We prepare the first column for the main image, and for two other columns, we will use them for shapes.
Step 2: Edit and Style up the First Column
Alright, we start with the first column. Add a Code module. On the settings panel, go to the Background block and then add a background image as your preference.
Once you add a background image, go to the Admin Label block, then give it a name for this module. We named it "1st" for this module. Applying the admin label will make it easier when you want to access it on the Layers menu.
Still on the Code module settings panel, go to the Design tab -> Sizing options. Set the Width and Height to 450px.
Now, it’s time to mask the image. Go to the Advanced tab -> Custom CSS. Next, paste the CSS snippet below to the Main Element field.
-webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCA1MDAgNTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48cGF0aCBkPSJNMjY0LjM1MywzMy42ODFjMTAzLjEwMiwyOC42NDcgMjM0LjQ1NSw4MC42NzEgMjM0LjQ1NSwyMjMuOTYzYzAsMTMzLjk0NSAtMTU3LjA4OSwyMzYuODY3IC0yNTcuMDIyLDIyNS42NjFjLTg3LjU5MywtOS44MjEgLTE0Ny43MzIsLTQ5LjI0NSAtMTgzLjUxNiwtMTE0LjE5Yy0zNy45MzcsLTY4Ljg1NiAtNjcuNjg4LC0xOTYuOTkxIC01My40NTUsLTI1OC44OTFjNy40NTMsLTMyLjQxNSAyMi44NzgsLTU1LjcwMiA0NS42NTYsLTcwLjQ3YzU0LjM2NSwtMzUuMjQ3IDE0MC42NywtMjYuNDE0IDIxMy44ODIsLTYuMDczWiIvPjwvc3ZnPg==");
-webkit-mask-repeat: no-repeat;
Step 3: Edit and Style up the Second Column
Next, we move to the second column. Add the Code module, then go to the settings panel. Afterward, go to the Background block and add a background color of your preference.
Once you add a background color, go to the Admin Label, then give a name for this module. We named it "2nd" for this module.
Next, we want to edit the size of this module. Go to the Design tab -> Sizing options. Set the Width and Height to 145px.
If you want to rotate the shape, you can go to Transform and choose Transform Rotate. In this example, we set 15deg to the first field only.
Now, it’s time to mask the shape. Go to the Advanced tab -> Custom CSS. Next, paste the CSS snippet below to the Main Element field.
-webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAzIDMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+PHBhdGggZD0iTTIuMDY4LDEuMjk3YzAsMC4yMDQgLTAuMDg0LDAuNDA1IC0wLjIyNiwwLjU0OWMtMC4xNDQsMC4xNDIgLTAuMzQ0LDAuMjI4IC0wLjU0NiwwLjIyOGMtMC4yMDUsLTAgLTAuNDA3LC0wLjA4NiAtMC41NDksLTAuMjI4Yy0wLjI4NywtMC4yOTEgLTAuMjg3LC0wLjgwNSAtMCwtMS4wOTVjMC4xNDIsLTAuMTQyIDAuMzQ0LC0wLjIyNSAwLjU0OSwtMC4yMjVjMC4yMDIsMCAwLjQwMiwwLjA4MyAwLjU0NiwwLjIyNWMwLjE0MiwwLjE0NyAwLjIyNiwwLjM0NCAwLjIyNiwwLjU0NiIgc3R5bGU9ImZpbGwtcnVsZTpub256ZXJvOyIvPjwvc3ZnPg==");
-webkit-mask-repeat: repeat;
-webkit-mask-size: 5px;
You can adjust the shape’s position to the main image per your preference. Go to Position. Set to Absolute, edit the Vertical Offset, Horizontal Offset, and Z-Index.
Step 4: Edit and Style up the Third Column
Alright, now we will edit and style up the third column. Add the Code module, then go to the settings panel. Afterward, go to the Background block and add a background color of your preference.
Once you add a background color, go to the Admin Label, then give a name for this module. We named it "3rd" for this module.
Next, we want to edit the size of this module. Go to the Design tab -> Sizing options. Set the Width and Height to 45px.
If you want to rotate the shape, you can go to Transform and choose Transform Rotate. In this example, we set 315deg to the first field only.
Now, it’s time to mask the shape. Go to the Advanced tab -> Custom CSS. Next, paste the CSS snippet below to the Main Element field.
CLIP-PATH: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
You can adjust the shape’s position to the main image per your preference. Go to Position. Set to Absolute, edit the Vertical Offset, Horizontal Offset, and Z-Index.
If you want to set the position of your image masking to the center of the page, go to the Row Settings -> Design tab -> Spacing. Set 400px of left margin.
That’s it. Don’t forget to click the Save Draft button or Publish button if you want to save or publish your project.
The Bottom Line
This article shows you how to add image masking in Divi without the help of any add-ons. Image masking is impressive; it will make your image look stunning. But keep in mind that not every image is suitable for masking. In some cases, the basic image is much better.
There is actually a simpler solution to add image masking in Divi: using the Divi Pixel plugin. The plugin offers several masking shapes. You can apply a certain masking shape with a single click. No need to deal with CSS code. Here are some masking shapes offered by Divi Pixel.
Where to get Divi Pixel?
You can get it on Divi Marketplace.
