[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! 👉Get This Deal
Mark Hendriksen Logo

How to Create a Divi Image Overlay

Mark Hendriksen | January 29, 2023 | 4 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

Learn how to create an engaging Divi image overlay that will keep your visitors interested in your site. This tutorial covers everything you need to know!

Are you looking to make your Divi website stand out against the competition? One of the best ways to do that is with image overlays—a background image combined with a background layer containing text and other elements.

Not only does this technique add visual interest, but it also helps draw attention to links and calls to action. In this tutorial, I’ll show you how you can quickly turn any of your images into eye-catching image overlays using Divi’s built-in tools!

Here is a sneak peek of what we are going to create.

Divi image overlay examples

Table of contents

How to create a background image overlay

If you just want to add transparent background color on top of your image follow these steps.

Place an image module on your page and open it. Place an image in it and go to the Advanced tab.

Place the following CSS class: divi-image-overlay-bg.

Add a class to the image module

Now place a code module under your image and copy/paste the following code into it:

.divi-image-overlay-bg:before {
   height: 100%;
   width: 100%;
   background-color: rgb(233 75 0 / 50%); /* set you overlay color */
   z-index: 9;

Under the background color, you can change your own color.

CSS for the code module

How to create an image overlay on hover

This is very easy to do and does not require any custom code. Just place an image module on your page and add an image to it.

Then expand the Link tab and place either a link or a dummy link into it.

Add a link to the image

After that navigate to the Design tab and expand the Overlay tab. The overlay tab will only be visible when you add a link to your image. That’s why we did that in the previous step.

From here it is very straightforward, enable the Image overlay and all the options will be visible.

Enable image overlay

If you do not want an icon on your overlay then you can just set the color to transparent.

On the hover overlay color, you can set your overlay image color.

How to create an image overlay on hover with a title and button

We are going to create an overlay image with inside a title, text, and a button. You can add any module you like.

Step 1: Create the structure

Start by adding a section and a row, I use a 1/3 column structure but you can use any structure you like.

Open the row and then the column. Go to the Advanced tab and place the following CSS class divi-column-overlay.

Add thhe class divi column overlay

Inside the column, place a new image module.

Open the image module and place an image under the image tab. After that go to the design tab and Under Spacing set the bottom margin to 0px.

Image module bottom margin

Then go to the Advanced tab and place the CSS class divi-image-overlay.

Add the CSS class divi image overlay background

Step 2: Add the background overlay

Under the image module you can place a Divider module, we will be using this for the image overlay color.

Disable the setting Show Divider under Visibility.

Add a divider module

After that expand the Background tab. You can add a background or a background gradient color. If you want a transparent color so the background color shines through the background image then you have to set a transparency, you can do that on the right side of the color window.

Sett a gradient background color

Now head to the design tab and under Sizing set the height to 100%.

Set the divider height to 100%

After that go to the Advanced tab and set the position to absolute.

Set the position of the divider to absolute

Note: The divider module is now on top of the image module and you can not target the image module to open it. If you need to open the image module then switch to wireframe view (left-bottom icon) or open the layers panel (right-bottom icon).

Step 3: The overlay heading text

Add a text module under your image and place an h2 title in the text field. This will be the overlay heading text.

I have used the following settings for this title:

font-family: Open-sans
font-weight: light
heading 2 text alignment: center
heading 2 text color: #ffffff
heading 2 text size: 36px

Navigate to the advanced tab and place the CSS class: divi-image-overlay-item

Place the title class

After that expand the Position tab and Set the Position to absolute.

Set the location to top center and the vertical offset to 22%. You have to play with the vertical offset value depending on your image dimensions.

Title position settings

Step 4: The overlay body text

Place another text module below the last one and add some text to this module. This will be the overlay text for the image.

For the text module, I add left and right padding of 35px. So that the text sits a bit away from the edges.

In the advanced tab, I use the same CSS class (divi-image-overlay-item) as previously.

Under position, I use the same settings only in the location I choose center.

Center the body text

Step 5: The overlay button

Place a button module under your text module and give it the following CSS class “divi-image-overlay-item”. This will be the last overlay element.

I have used the following styling setting for this button:

Button text size: 18px
Button text color: #ffffff
Button background color: gradient
Button border-width: 0px
Button font-weight: bold

For the position, I use bottom center with a vertical offset of 15%.

Button position

Step 6: Add the custom CSS code

One final step to make this actually work is to place a code module on your page and place the following custom CSS code into it.

@media all and (min-width: 981px) {   
.divi-image-overlay-item {
   opacity: 0;  
.divi-column-overlay:hover .divi-image-overlay-item {
   opacity: 1;  
.divi-column-overlay .divi-image-overlay-item {
   transition: all 300ms !important;/* transition speed */ 
CSS snippet for Divi image overlay

Additionally, you can also place the custom CSS code in your Divi > Theme Options > CSS but then without the style tags.

Or in case you are using a Divi child theme then you can place it in there.

Divi Image Hover Plugin

Divi image hover module

If you really want to take your custom image overlays to the next level then the plugin Divi Image Hover Module is something you want to look into.

Divi Image Hover is the ultimate plugin for creating custom image overlays with ease. It gives you 250+ custom animation options across 6 different categories of effects to choose from, making it the most versatile and feature-rich image module on the market.

Swap images

Swap images are a great way to customize your website and make it look more attractive to visitors. With a number of different effects available, you can easily design custom image overlays for an engaging user experience.

58+ hover effects

With 58+ effects available, you can easily customize your image overlays for greater appeal. From classic fade-ins and wipe effects to slideshows and 3D transformations, you have plenty of options to choose from when crafting the perfect custom Divi hover effect


Creating an engaging Divi image overlay design is easier than you might think! With a little bit of creativity and the right tools, you can easily create a stunning overlay image that will keep your visitors engaged with your site.

Thanks for following along with this tutorial. I hope you found it helpful and please feel free to share it with anyone who might need it.

Do you have any questions or comments about creating an engaging Divi image overlay? Let me know in the comments below!

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

4 thoughts on “How to Create a Divi Image Overlay”

  1. When you get to the point in the process where the instruction is to “go to the design tab and under Sizing set the height to 100%”, I can’t. Mine is set to use only px and I don’t seem to be able to change this. Any suggestions? It is stopping the process. Thanks!


Leave a Comment