Code by Day | Explore By Weekend

How To Replace The Divi Image Hover Overlay Icon With Text Tutorial by Pee Aye Creative

How To Replace The Divi Image Hover Overlay Icon With Text

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

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!

13
Last updated Mar 9, 2021 @ 10:08 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

Subscribe
Notify of
guest
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Sarah Austin
Sarah Austin
1 month ago

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?

Mark Hancock
1 month ago

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.

Jeff
1 month ago

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

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 5,600 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart