Tired of boring image hover effects with generic pixelated icons? Want to add textual interest to your website? Well, worry no more!
This tutorial unlocks the secrets to displaying captivating text on an image hover by creatively combining a few of Divi Builder’s native features and adding a simple CSS snippet, all without relying on a single plugin.
Steps to Show Text on Image Hove in Divi
Step 1: Add the Image Module
Go to the Divi Builder, add a new Image module, or select the existing one.
Once you add the Image module, we need to set the module to show text when hovering over the image. Here are the following changes we applied to the module:
Content Tab
Image:
- Add your preferred image.
Link:
- If you would like your image to be a link, input your destination URL in the Image Link URL input field. Or if you don’t want your image to be a link, please enable the Open in Lightbox option.
Note: Please ensure to choose one of the two options above (adding a URL or activating the lightbox); it will allow you to unlock the Overlay setting on the Design tab.
Design Tab
Overlay:
- Enable the Image Overlay option.
- Choose any Overlay Icon Color, this is going to be the text color.
- Choose your preferred Hover Overlay Color, it will show over the image when you hover on it
- Add any icon on the Hover Icon Picker, you must select an icon here to ensure that your text is going to show up.
Advanced Tab
CSS ID & Classes:
- Add the CSS Class
wpp-show-text-image-hover
into the CSS Class input field.
Attributes:
- To avoid distraction during image hover, it would be better to remove the Image Title Text.
Step 2: Add the Custom CSS
Next, we will add the CSS snippet to your site. You can add the CSS snippet to your Divi Theme Options page (Divi -> Theme Options-> Custom CSS) or your current page from the Page Settings. In this example, we will put the code in the Page Settings.
Go to the Page Settings (⚙️) -> Advanced tab. Afterward, copy the simple CSS snippet below and paste it into the Custom CSS input field.
.wpp-show-text-image-hover .et_overlay.et_pb_inline_icon:before { content: "Add to Cart"; font-family: inherit !important; font-size: 20px; line-height: 1.3em; margin-left: 0px; border: 3px solid; padding: 5px 10px; text-align: center; transform: translateX(-50%) translateY(-50%); width: 80%; } .wpp-show-text-image-hover img { transition: transform 0.5s ease-in-out; } .wpp-show-text-image-hover:hover img { transform: scale(1.2); } .wpp-show-text-image-hover { overflow: hidden; }
The result of this code is that when the user hovers over the image, a text box with the text “Add to Cart” will appear on top of the image, and the image will slightly enlarge.
You can replace the value of the content property "Add to Cart"
with your preferred text (line 2).
That’s it. To see the result, you can preview the page by clicking the Exit Visual Builder link, and don’t forget to save or publish your project if you want to.
The Bottom Line
This article shows how easily you can show text on an image hover in Divi without relying on any Divi plugins. Remember, the possibilities are endless! Experiment, refine your CSS code to get the best result, and push the boundaries of what’s possible within Divi. This is your playground, so make it yours!