Adding a Text Overlay to an Image on Hover

Written by Adam Cardenas

Project Manager at New Eve Media

April 7, 2020

Background

Adding a text overlay to images in WordPress can seem intimidating at first, especially if you have minimal experience building a website. Luckily, there is a quick and simple way to get this task achieved using Divi, a theme for WordPress. The Divi Builder and Visual Builder are great tools for any web designer, whether you’re just starting out or have been designing websites for years. One of the greatest things about Divi is that it gives you the ability to get creative with your website without having to put in too much CSS, or none at all; if you want you can simply use Divi as a drag and drop site builder.

Now there are several different ways you can add text over an image, depending on how you want your text overlay to work, but none of them include using the image module at all. The inspiration for this little trick came when a client wanted a text overlay to appear when hovering over an image only, so this is the method I will be using in this walk-through.

Getting started

To get started you need to add a button module. That’s right: a button module. Not a text module, not an image module, a button module. Under the “Content” settings, add your text and a link, if you plan on using one. Next, add your background image by heading over to the “Design” tab. Scroll down to “button” and click “use custom styles for button.” Here you will see an option to add your background image. Now if you were to stop and do a preview, or if you are building this with the visual builder, you’ll notice it looks something like this, which is not at all what we want.

Adding Custom Styles

To fix this, you will need to add some padding to your button. In the design tab right under the button section is an option for spacing; here you will see areas for margins and padding. You can insert the value of pixels of padding you want to give your button on its left, right, top and bottom, but I prefer to work with percentages. Here I add 25% padding to all sides, but you can do as much or as little padding as you prefer.

Now if you’re just trying to add a text overlay you’re practically done. However, since we want the text to show up only as a hover effect, there is some more work to do. I recommend heading to the “alignment” section under design first and centering your button, then customize your font. Next, under the button section, we are going to head to the Button Text Color option. Here, if you move your cursor over to the side of the title, four icons will appear, one of which is a little cursor which will bring up our hover options. To remove the text (when not hovered over) all you have to do is change the color to transparent while under “Desktop.” Under the “Hover” option, choose the color you want your text to be when it is visible.

Finishing up

You are going to repeat this process under the Button Border Color section and Button Icon Color section if using an icon. The last thing you will need to do is add a gradient overlay to your background image, but only when hovered over. If you are unsure what the background gradient overlay is, or are not sure if you need one, I recommend heading over to this blog post I wrote about how simple and effective it is to have one. For this last step, you will need to bring up the hover options for Button Background. Here, under Hover only, you will add a gradient by clicking the half shaded icon to the left of the image icon. After choosing your colors, scroll down and make sure you click yes to placing the gradient over the background image. 

Conclusion

And there you have it, you have created a text overlay over an image, simple as that. There are a lot of other things you can do with hover options through Divi; if you interested in some quick tips we did with images check out this post I wrote about adding simple hover effects with Divi. If you enjoyed this tutorial and want to use Divi for your web projects click here to buy the theme.

 

You May Also Like…

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.