Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Replace The Divi Image Hover Overlay Icon With Text

Nelson Miller Profile Orange
In this tutorial, you will learn how to replace the Divi Image hover overlay icon with your own custom text instead!

UPDATE: Check our our newer, bettter, and more comprehensive tutorial here: How To Place A Button And/Or Text Over An Image In Divi

How To Place A Button And Or Text Over An Image In Divi Tutorial by Pee Aye Creative

▶️ 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. 

Divi Image overlay will not show without a link
the Divi Image overlay will not show without a link

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.

Divi Image overlay settings

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!

Categories: Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

17 Comments

  1. Sarah Austin

    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?

    Reply
  2. Jeff

    Hey Nelson, if you wanted to make the text dynamic, say the name of the page you’re linking to, would that be possible?

    Reply
  3. Elayne

    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.

    Reply
    • Hemant Gaba

      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://www.peeayecreative.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. 🙂

      Reply
  4. Lucie

    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?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      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.

      Reply
  5. Harry Stymiest

    Is there a way to scale text size based on screen size (tablet,mobile etc)

    Reply
  6. Lien Verbeeck <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    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).

    Reply
  7. Julie Hanot

    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

    Reply
  8. Jurrien

    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”?

    Reply
    • Hemant Gaba

      Hey Jurrien,

      Yes, you can definitely use dynamic content instead of static and the behavior of the code will stay the same.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart