How to Design Custom Image Overlays in Divi

Image overlays have been around for a long time in web design. They are great for engaging visitors by revealing additional content and design elements when hovering over the image. Because this is such a popular design feature, there are many plugins out there dedicated to creating image overlays. However, depending on the plugin, they can be fairly limiting or they can be a bit overkill for what you may need. That’s why it helps to have the know-how to build these yourself in Divi.

In this tutorial, we are going to show you how to design custom image overlays in Divi. These overlays will change and reveal elements when hovering over the image. The best part is that you have complete control over the design of your image overlays using Divi’s built-in design options. And, with a few snippets of custom CSS, you can have some gorgeous image overlays to take your site to the next level. No plugin is necessary.

Let’s get started!

Sneak Peek

Here is a quick look at the design we’ll build in this tutorial.

Download the Divi Image Overlays Layout for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Download the Files

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

DOWNLOAD

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

To import the section layout to your Divi Library, navigate to the Divi Library.

Click the Import button.

In the portability popup, select the import tab and choose the download file from your computer.

Then click the import button.

Once done, the section layout will be available in the Divi Builder.

Let’s get to the tutorial, shall we?

What You Need to Get Started

To get started, you will need to do the following:

1. If you haven’t yet, install and activate the Divi Theme.
2. Create a new page in WordPress and use the Divi Builder to edit the page on the front end (visual builder).
3. Choose the option “Build From Scratch”.

After that, you will have a blank canvas to start designing in Divi.

Creating Custom Image Overlays in Divi

Building the Section, Row, and Columns

To get started, create a three-column row inside the default section.

Open the section settings and add the following background color:

• Background Color: #3a0ca3

Next, open the settings for column 1 and update the following:

• CSS Class: et-overlay-container
• Horizontal Overflow: Hidden
• Vertical Overflow: Hidden

The CSS Class is needed to trigger the hover effects of the overlay items that we are going to build. The hidden overflow is needed to because we are going to have a hover effect that scales the image beyond the column container.

Adding the Image

Now that the section, row, and column are ready, go ahead and add a new image module to column 1. This will be the main image behind our overlay designs.

Upload an image that is more of a portrait rather than a landscape. I’m using one that is roughly 800px by 1050px. Make sure it is wide enough to span the full width of the column on all browser sizes.

(NOTE: You can use landscape images but you may need to adjust the positioning of the overlay elements accordingly so that they don’t overlap.)

Under the design tab, update the following:

• Margin: 0px bottom

Under the advanced tab, add the following CSS Class:

• CSS Class: et-overlay-image

Adding the Image Overlay Color Using a Divider Module

To create the image overlay color, we are going to use a divider module. The idea is to create a cover over the image by making the divider span the full height and width of the column so that it sits perfectly over the image. Once in position, you can adjust the background color of the divider module to get the overlay color we want.

First, add a divider module under the image.

Then position the divider as absolute so that it will sit on top of the image:

• Position: Absolute

Under the content tab, update the following:

• Show Divider: NO
• Background Color: rgba(247,37,133,0.8)

Then update the height and width of the divider:

• Width: 100%
• Height: 100%

Once the design is in place, add the following CSS Class to the divider:

• et-overlay-item

(NOTE: This class should be added to all overlay design elements that you want to show only on hover. If you don’t want the element to be hidden initially, leave it out.)

To help keep track of the design elements/modules, open the layers modal, and label the divider module (“overlay color”).

Adding the Overlay Heading Text

Under the divider module, add a new text module. This will serve as our overlay heading text that will appear at the top of the image on hover.

Update the content with an H2 heading:

<h2>Coaching</h2>

Then update the label of the text module for referencing later.

Under the text design settings, update the following:

• Text Alignment: Center
• Text Color: Light

• Heading 2 Font: Cormorant Garamond
• Heading 2 Font Weight: Bold
• Heading 2 Text Size: 40px

• Width: 100%
• Max-Width: 85%

Under the advanced tab, update the position as follows:

• Position: Absolute
• Location: top center
• Vertical Offset: 10%

(NOTE: The vertical offset may need to be adjusted depending on the size of the aspect ratio of the image. For example, a landscape type image may need less of an offset)

Next, add the following CSS Classes to the text module:

• CSS Class: et-overlay-item move-down

In addition to “et-overlay-item” class, we are adding an additional “move-down” class in order to use custom CSS to move the heading downward slightly on hover.

Creating the Overlay Body Text

To create the overlay body text, we can duplicate the text module used for the overlay heading. Before we update the settings for the duplicate, change the label to “overlay body”.

Open the text settings for the new text module and update the body content with a few sentences of paragraph text.

Under the advanced tab, change the absolute location of the module to the center.

Since we don’t want this one to move on hover (only appear), update the CSS Class to only included the following:

• CSS Class: et-overlay-item

Creating the Overlay Button

The last overlay element on this image will be the button. To create the button, add a new button module under the “body text” text module.

Before changing the design, update the position of the button as follows:

• Position: absolute
• Vertical Offset: 10%

Now the button should be centered at the bottom portion of the image.

While in the advanced tab, update the CSS Class and add a snippet of custom CSS to the Main Element as follows:

• CSS Class: et-overlay-item move-up
• Main Element CSS:

  min-width: 15em

Notice there is an additional class added to the button in order to move it upward slightly on hover. This is to compliment the heading text downward movement on hover.

Then update the following design settings:

• Button Alignment: Center
• Button Text Size: 14px
• button Background Color: #4361ee
• button Border Width: 0px
• Button Letter Spacing: 0.1em
• Button Font Weight: Bold
• Button Font Style: TT
• Padding: 0.8em top, 0.8em bottom, 0px left, 0px right

Adding the Custom CSS with the Code Module

Before we create a few other versions of this overlay design, let’s add the custom CSS needed for the overlay hover effects. To do this, add a code module under the button.

Then paste the following CSS inside the code content. Don’t forget to wrap the code in the necessary script tags.

<style>
 @media all and (min-width: 981px) {
  
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }

}
</style>

The code is commented so that you can understand where you can adjust the CSS as needed.

Duplicating the Column for More Designs

Although we already have two additional empty columns to work with, it is easier to transfer all the modules and design within the first column over to a new column by duplicating the entire column. To do this, open the layers modal, delete the two empty columns, and then duplicate the column containing the image overlay design twice. You should have a total of three columns with identical designs.

Creating Image Overlay Design #2

Now that we have all the design elements in place within each of the columns, we can tweak the design to create additional image overlays. For this next design, we are going to place the button in the center of the image (always visible). Then we will move the heading and body text into view from the top and bottom of the image.

Adjust Body Text Location and CSS Class

Open the settings for the overlay body text module in column 2 and update the position:

• Location: Bottom Center
• Vertical Offset: 5%

Then update the CSS Class with the following:

• CSS Class: et-overlay-item move-up

Adjust Button Location and CSS Class

Next, open the settings for the button in column 2 and update the following position location:

• Location: Center Center

Then take out the CSS Class because we want to keep the button visible always.

Open the settings for the divider module (overlay color) and change the background as follows:

• Background Color: rgba(67,97,238,0.8)

Then open the settings for the button and change the background color:

• Button Background Color: #f72585

Adjust Image and CSS Class

Next, open the settings for the image and upload a new image (if you want).

Then add the following CSS Class to the Image:

• CSS Class: et-overlay-image et-scale

Notice that in addition to the class “et-overlay-image”, there is an additional class called “et-scale” that will cause the image to scale up in size, creating a zoom-in effect on hover.

Creating Image Overlay Design #3

Now its time to create the third image overlay design in column 3.

Adjust Overlay Body Text Content and CSS Class

Start by opening the settings for the overlay body text module in column 3 and add the H2 heading above the paragraph text. Now the two will be inside one module instead of two.

Then take out the CSS Class so that the text remains visible on top of the image.

Adjust Button Offset and CSS Class

Open the settings for the button module and update the position vertical offset:

• Vertical Offset: 5%

Delete Overlay Heading

Next, delete the overlay heading text module.

Adjust Overlay Color and CSS Class

Open the settings for the divider module (overlay color) and update the background with the following:

• Background Gradient Left Color: rgba(67,97,238,0.8)
• Background Gradient Right Color: rgba(247,37,133,0.8)
• Start Position: 25%
• End Position: 75%

And since we want to keep the gradient overlay visible at all times, take out the CSS Class.

Adjust Image CSS Class

Lastly, we are going to add an additional CSS Class (“et-rotate”) to the main image that will both scale and rotate the image on hover.

• CSS Class: et-overlay-image et-rotate

Final Touches

Before we check on our final results, we need to make a few adjustments.

Take out the default bottom margin for all modules

By default, each module comes with a bottom margin of 30px due to the default gutter width (3) in the row settings. This can throw off the positioning of the modules in our overlay design. To take them out, open the image module settings for one of the images in the design. Since we already updated the margin with a 0px bottom margin, we can extend this margin to all modules.

Right-click on the margin setting and choose “extend margin”.

Then choose to extend the margin to All Modules on the page.

Delete Duplicate Code Modules

Make sure to delete additional code modules that have been carried over when duplicating the first column. You should only have one. You can do this easily from the layers modal.

Final Results

Now that our three designs are complete, let’s check out the final results of our image overlay designs.

And here is the design on mobile. The overlay hover effects apply only to desktop via the custom CSS media query in the code module. Therefore the overlays will be visible always on mobile.

Final Thoughts

Building custom image overlays is actually a lot of fun. There are countless designs you can test out visually with the Divi builder and it only takes a small amount of custom CSS to apply the hover effects. Even the hover effects for the overlay items require custom CSS, you can still take advantage of the built-in hover options to target each of the overlay elements individually.

I look forward to hearing from you in the comments.

Cheers!