Show text when hovering over an image in Divi

Last updated May 3, 2021

Ever wanted to show text when hovering over an image instead of the + sign that is used on so many websites? Well hopefully by the end of this tutorial, you will be able to do just that.

Let’s get started by setting a few things first

There are a few things that need to be setup first before this can be done. Not to worry though, it is very easy to do and can be done quickly.

So the first thing you want to make sure is there is an actual url to go to when you click on the image. You can do this by going to the Divi Image module -> Settings -> Content tab and you would add in the link at Image Link URL field. Alternatively, if you have no url, you can activate the Open in Lightbox feature which would display it in a popup.

image url to show text when hovering over an image

Once that is done, you can head to the Design tab and open the Overlay settings.

overlay settings to hover over an image

Here we want to change three things;

  1. The colour – now that the Overlay Icon Colour is actually going to be the Text colour, you want to make sure that it will contrast with the colour selected in the next step, Hover Overlay Colour.
  2. The background colour – The background colour that shows over the image when you hover on it, can be changed using the Hover Overlay Colour. Again, just be sure to select colours that contrast (light text on dark background as an example) each other to ensure that they do not get lost in each other.
  3. The Icon to display – you have to actually select an icon here to ensure that your text is going to show up.

Lastly we want to go to the Advanced tab. Click on the CSS ID & Classes and then add in a new class ( I am using the one below) under the CSS Class field

dd-image-hover-text

Once those are all setup, you can go ahead and enter the CSS.

CSS to show text when hovering over an image

So to show the text when hovering over an image we will have to add in some custom CSS. This can be done, either in your child theme or else in your Divi -> Theme Options -> Custom CSS section.

/* show text when hovering over an image */

.dd-image-hover-text .et_overlay.et_pb_inline_icon:before {
     content: "View Image";
     font-family: inherit !important;
     font-size: 24px;
     line-height: 1.3em;
     margin-left: 0px;  
     text-align: center;
     transform: translateX(-50%) translateY(-50%);
 
     width: 80%;
}

In the code above, you can change the content to display any word you want. Just be sure to always include the ” “.

The font-family is being inherited from your default font. I have set the size to 24px, but you could customise that to ensure it fits the size of the image you are displaying. The only ones you must not change are the margin-left and the transform elements. These are required to ensure that the hover effect works.

And that’s it! You are now able to show text when hovering over an image instead of the boring + sign that is used everywhere.

Hope you enjoyed it and found it helpful. Let me know if in the comments.

Subscribe to keep informed

You're busy, I get it. Who has time to visit the site daily to see if there are new tutorials? Make your life easier by subscribing to the monthly newsletter where you will get a summary of all the posts uploaded that month.