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!
Hi Nelson, useful post thanks, I’d like to give it a go. I don’t see any custom CSS though (viewed in Chrome, Firefox and Edge), am I missing something?
Hi Sarah,
It is there now. Sorry about that.
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!
Hey Nelson, if you wanted to make the text dynamic, say the name of the page you’re linking to, would that be possible?
Hi Jeff,
Unfortunately, no not with something as simple as a CSS trick like this.
I tried to get this to work. I am NOT a coder so just starting out. Copied the CSS and got no change. I was able to use the light box trick to trigger the overlay and get an icon but no words. I saw a video from 4 years ago to add hovering text and link for images in gallery. I was very excited to see something so fresh. This is just images. All I want is to use images to become links to pages within or outside my website. The post is linked in my bookstore. Trying to hide it until it looks/works better. Not sure what a font family is? Is that just the name of the font I like or is it more broad.
Hi Elayne
Let me guide you on how we can achieve that. First, add an Image Module and then go to the Image Module Settings > Content Tab > Links and under the link heading add the link where you want to redirect the visitors on click(make sure open in lightbox setting is off). Then go to the Image Module Settings > Advanced > CSS ID & Classes and provide a Custom Class to the image. Let’s say that the custom class you have provided is pa-image-hover-text
Now go to the WordPress Dashboard > Divi > Theme Options > Custom CSS Panel and place the CSS code given below:
.pa-image-hover-text .et_overlay: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%;
}
You can change the text in the content property to showcase the content of your liking on hover. The font-family property defines what font you are using on the text and you need to provide the font name that you want to use.
Recently we have posted a guide where we have shown that how we can place the text module over the image module: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-place-a-button-and-or-text-over-an-image-in-divi/
This way we get more control over the text and the image and this guide will definitely be going to help you in this scenario.
Let us know how it goes. 🙂
Thanks so much for this, love the effect it makes.
I want to use this for a homepage, with multiple images, but different text, how would I achieve this?
Hi Lucie,
Any time you want to do that kind of thing, simply change the custom CSS class for each one. Then you would have a corresponding snippet with that class, and you can change the text in each snippet.
Is there a way to scale text size based on screen size (tablet,mobile etc)
Hi Harry,
You could do that media queries yes. However I might suggest a better idea, use this other tutorial instead: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-place-a-button-and-or-text-over-an-image-in-divi/
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).
Hello,
Thank you for your great tutorial.
When I put the code in Custom CSS, I get expected RBRACE and unexepected token }
Thank you very much for your answer
Hi Julie, it sounds like you are adding the code in the module. Make sure to add it in Theme Options.
Hello,
Awesome tutorial you’re making, my go to for all things Divi.
I adapted the code to work for a blog grid and was wondering if it’s possible to have the content be dynamic “content = post-content-excerpt” instead of the static “View Article”?
Hey Jurrien,
Yes, you can definitely use dynamic content instead of static and the behavior of the code will stay the same.