UPDATE: Check our our newer, bettter, and more comprehensive tutorial here: How To Place A Button And/Or Text Over An Image In Divi
An Easy Solution To A Missing Feature
If you want to show text when you hover over a Divi image, then you have come to the right place! In this tutorial, I am going to show you how to replace the Divi Image overlay icon with custom text instead! You can also customize the text and use this mulitple times on your website, so be be sure to watch the video for all the instructions for that!
▶️ Please watch the video above to get all the exciting details! 👆
Adjust The Divi Image Module Settings
There are a few steps to set this up, but it is extremely easy and anyone can do this very quickly!
First of all, you need a Divi Image module. Open the settings and in the Content tab, make sure to add a link. If you don’t want the image to link anywhere, then make sure to turn on the Open In Lightbox setting. Either way, one of these is required in order to get the Overlay settings to show up in the Design tab. You can see what I mean in the screenshots below.
Once you add the link or enable Open in Lightbox, the Overlay settings appear in the Design tab. Below is a screenshot of what is available.
Keep in mind that the Overlay Icon Color is now going to be the text color. So be sure to contrast that with the Hover Overlay Color.
Also, make sure to actually click on one of the icons. Even though there is a default icon, you need to physically choose one for this to work.
Once you have these settings adjusted, you can move on to applying the CSS.
Add And Customize The CSS
Now it is time to replace the Divi Image hover icon with your own custom text. This is where the fun part begins, with custom CSS. If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi
/*replace Divi image module hover icon with text*/
.pa-image-hover-text .et_overlay.et_pb_inline_icon:before {
content: "View Article";
font-family: inherit !important;
font-size: 24px;
line-height: 1.3em;
text-align: center;
transform: translateX(-50%) translateY(-50%);
margin-left: 0px;
width: 80%;
}Most of these items can be customized. Obviously you can write any words you want, but you can also choose the font family, font size, line-height, and text aligment. Also, take note of the width. You may want to adjust that depending on who much text you have. If you are planning to write more than a few words, you may want to increase that. Just don’t mess with the left margin and transform, those are required.
Be sure to watch the video to see this these customizations in action and to see how simple this solution is! Let me know in the comments if you enjoyed this!
Hello,
This was really helpfull, thank you very much!
My homepage has now four images with a hover that links to the different pages.
First I ‘ve tried the ‘Text and buttons over immage’ way, which didnt work for me because I have two images in 1 colum (1row, two colums with each two images).
Great blog….thank you! There are a lot of plugins that uses this type of image reveal. Thinking this will clean things up on the site.
I’m glad you like this Mark!