The Owl Carousel Pro plugin adds the ability to add a carousel of posts, custom post types, and manually uploaded images to Divi. In this tutorial, we’re going to show you how to add a hover overlay to the carousel items and images.

There are two ways we can do this:

• add the overlay to the entire carousel item (including title, excerpts, meta, etc.)
• add the overlay to the images only

Add an overlay to the entire owl carousel item

To add the overlay to the entire carousel item, we can simply add the following CSS to your child theme’s stylesheet or the Custom CSS box in the Divi Options page:

.dp_oc_item > a:before {
content: "";
position: absolute;
opacity: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, .7);
-webkit-transition: all .4s;
-moz-transition: all .4s;
transition: all .4s;
}

.dp_oc_item > a:hover:before {
opacity: 1;
}

.dp_oc_item > a:after {
opacity: 0;
text-shadow: 0 0;
font-family: ETmodules!important;
font-weight: 400;
font-style: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1;
text-transform: none;
speak: none;
position: absolute;
top: 45%;
left: 50%;
margin: -16px 0 0 -16px;
font-size: 32px;
content: "\50";
-webkit-transition: all .4s;
-moz-transition: all .4s;
transition: all .4s;
}

.dp_oc_item > a:hover:after {
opacity: 1;
}

In the example above, we’re adding a semi-transparent, white overlay with the default Divi plus sign in a round circle icon. You can adjust the background-color in the CSS above to change the overlay color and opacity. To change the icon, you’ll need to change the content: “\50”; line. You can reference this page for Divi’s Unicodes for each icon:

Unicode Reference Guide

Scroll down that page and you’ll see the complete list of Divi icons with the unicode below each icon. Anything before and including the x in each unicode gets removed. Then just remove the semicolon and what’s left is what you’ll use. Now all you need to do is precede it with a backslash, wrap it in double quotes, and add the closing CSS semicolon. The end result is “\50”; for the default icon. If you wanted to use the up arrow icon, the first icon in the Unicode Reference Guide, you would change it to this:

content: "\21";

Add an overlay to the owl carousel images only

Applying the overlay to the images and not the entire carousel item is a little more complicated. To do this, we first need to add some custom javascript. You can add this in your child theme’s footer.php file just before the closing </body> tag or you can add it to the Divi -> Theme Options -> Integration page in the following box:

Add code to the < body > (good for tracking codes such as google analytics)

If you want to add the overlay to the DP Owl Carousel module, add the following javascript:

If you want to add the overlay to the DP Owl Image Carousel module, add the following javascript:

You can add both functions if you want to add the overlay to images in both carousels. The functions are adding HTML span containers around and after the carousel images.

Now we just need to add the CSS that will add the overlay to the new HTML containers we created in the javascript functions above. You’ll add the following CSS to your child theme’s stylesheet or the Custom CSS box in the Divi Options page

.dp_oc_item .dp_oc_image_container {
display: block;
position: relative;
}

.dp_oc_item .overlay {
content: "";
position: absolute;
opacity: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, .7);
-webkit-transition: all .4s;
-moz-transition: all .4s;
transition: all .4s;
}

.dp_oc_item .dp_oc_image_container:hover .overlay {
opacity: 1;
}

.dp_oc_item .overlay:after {
opacity: 0;
text-shadow: 0 0;
font-family: ETmodules!important;
font-weight: 400;
font-style: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1;
text-transform: none;
speak: none;
position: absolute;
top: 50%;
left: 50%;
margin: -16px 0 0 -16px;
font-size: 32px;
content: "\50";
-webkit-transition: all .4s;
-moz-transition: all .4s;
transition: all .4s;
}

.dp_oc_item .dp_oc_image_container:hover .overlay:after {
opacity: 1;
}

Again, you can modify the background color and opacity and the hover icon using the instructions above.