How to mask a background video to a custom SVG image using Divi
1. Add Background Video
For this example we have a blurb module with a background image.
We’ll switch to a background video in the hover state.
![](https://lcmg.lcmdev.net/wp-content/uploads/2023/08/image-1.png)
![](https://lcmg.lcmdev.net/wp-content/uploads/2023/08/image-2.png)
2. Add CSS Class
We’ll use this class to target the module & add the background mask effect in the next step.
![](https://lcmg.lcmdev.net/wp-content/uploads/2023/08/image-4.png)
3. Add Background Mask
In Divi’s Custom CSS area (Theme Options page), we’ll target any module with the .possibility-slide
class that we defined in the previous step. Then we’ll select the .mejs-container
class within this module — this is where Divi wraps background videos.
From here, we can set the CSS mask-image
property and specify the URL of the SVG you want to use as the mask shape. We’ll also set size, position, and repeat properties to center the mask image & achieve the desired look.
(*Important: make sure to include the -webkit-
prefixed versions as well for browser support)
![](https://lcmg.lcmdev.net/wp-content/uploads/2023/08/image-5.png)
That’s It!
Divi also has a built-in Background Mask setting which is much cleaner to use, but unfortunately this limits us to only a handful of predefined shapes.
![](https://lcmg.lcmdev.net/wp-content/uploads/2023/08/image-7.png)
![](https://lcmg.lcmdev.net/wp-content/uploads/2023/08/image-8.png)