Search

How to Show Text on Image Hover in Divi (without Plugin)

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.
Adding image to the Image module.

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.

Applying some settings to the image via the settings panel.

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.
Enabling the Overlay option.

Advanced Tab

CSS ID & Classes:

  • Add the CSS Class wpp-show-text-image-hover into the CSS Class input field.
Adding CSS Class to the Image module.

Attributes:

  • To avoid distraction during image hover, it would be better to remove the Image Title Text.
Removing title and alternative text on image attributes.

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!

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.