I woke up one morning and Divi’s button hover controls were gone.  Just like that. It used to be in the section shown below, but no matter how hard I looked – it was not there anymore. I ignored it for a couple of days thinking that maybe it was a glitch and would clear up with the next Divi update. But that didn’t happen. I remembered hearing that Divi was coming out with some built-in hover effects – maybe that’s where they went?

What Ever Happened to Divi’s Button Hover Controls? Click To Tweet

And yes. That’s where it went – introducing the “Little Black Pointer” or pointer icon or hover pointer icon – I’m not sure what Divi is calling it.

Wherever you see the little black pointer – you have the option to add a hover effect, Go ahead and click on it. You will automatically open “Default” and “Hover” Tabs. You simply set each one and viola! Hover effects! But it’s not so simple – especially for a more than “simple” hover effect.

Let’s Start Hovering!

What we are going to accomplish in this video is the following hover effect. This is a standard Call To Action module, but keep in mind – the following techniques will work in almost every module. I decided to use the Call To Action module because it has many parts in it that can be “hovered“. Keep in mind that no CSS was hurt in the making of this video. As a matter of fact – No CSS was used at all.

There is going to be a total of 6 hover effects in this one example. They have to be configured in 6 different areas, and they will run simultaneously. First, we are changing the color of the image.  Second, we are changing the position of the image. Third, we are changing the title size. Fourth, we are changing the color of the title. Fifth, the opacity of the body text and lastly, Sixth, we are adding a bottom border line.

Divi Hover Effects – Learn How @ Divi Ready Themes! Click To Tweet

That’s a lot of hovers.  It’s also a lot to keep track of, so take your time and make sure you are entering data in the correct areas. More often than not I find myself making changes to the default state instead of the hover state, and have to stop and do it all over again! So pay attention to what you are doing. Save your work. Let’s get started.

Let’s go into our Visual Builder and add a “Call to Action” Module:

To recap, we are going to:

1. Change the color of the image
2. Change the position of the image
3. Change the Title Size
4. Change the Title Color
5. Change the opacity of the Body Text
6. Add a Bottom Border

Step 1: Change Image Color

The first thing we need to do is add a background image to our module. We are also going to set the Background Image Blend Mode to “Multiply”. Lastly, set the Background Color to White.

Since Divi has not gotten advanced enough to have a hover tab for the image itself, we are going to change the color of the image through the use of image blends. By having the background image blend mode set to Multiply, and the background color set to white – the image will appear normal. This will be our default state.

Divi Child Themes and Divi Layouts @ Divi Ready Themes Click To Tweet

Now let’s go back to our Background Color, Click the Pointer Icon to open the Hover Tab. Make sure the Hover Tab is highlighted when making your changes.

Change the background color to anything but white and you will see your image change. This is due to the fact that we have the image blend mode set to Multiply. Okay – save your changes. Step one, Change Image Color – Done.

Step 2: Change Image Position

Let’s go back to the Call to Action Settings and let’s move over to the Design Tab and go down to Spacing. In the spacing area, we see our hover Pointer Icon. Make sure the Hover Tab is highlighted. Let’s change the Custom Margin Top to -25px.

Save your work. Step 2 completed. Change Image Position – Done.

Step 3: Change Title Text Size

Let’s go back to Call To Action Settings, this time we are going to head over to the Design tab and go down to Title Text.

First, we click on the Pointer Icon to open the Hover Tab. Change the Title Text Size to 35px. Step 2 completed – Change Title Size – Done. Let’s move on.

Step 4: Change Title Text Color

Don’t move from where you are. In that same screen, let’s move up to Title Text Color, find the Pointer Icon and open the hover tab. I chose Yellow because it stands out against the background color.

Make sure you save your changes. Okay, Step 3, Change Title Color – Done.

Learn How To Create Divi Hover Effects at Divi Ready Themes Click To Tweet

Step 5: Change Opacity of Body Text

Next, we are going to add the effect of the body text becoming visible on hover – it’s pretty simple. Let’s go back to our Call To Action Settings, Design Tab and let’s go down to Body Text.  Click the pointer icon to open the Hover Tabs. Highlight the Default tab, and change the opacity of the body color to transparent.

Move over to the Hover tab and change the color to White with no transparency.

Step 5 – Change Body Text Opacity – Done. Save your work.

Premium Divi Child Themes and Divi Layouts Click To Tweet

Step 6: Add Bottom Border Line

Okay – We are almost done. The last step is to add the Bottom Border Line to the module on hover. Let’s go back to our Call To Action Settings, open the Design tab and go to Border. Choose the Bottom Border icon. Next click on the pointer icon to open the Hover tabs. With Hover highlighted, change the Bottom Border Width to 10px. While you are there, give it a color.

That’s it. Save everything and exit the Divi Visual Builder and you should have the hover effect shown. All 6 of our individual hover transitions we set will trigger at the same time and give you a nice, clean hover effect.

Lastly:

If you want to change the Transition duration, Transition delay and Transition Speed Curve, open the Call To Action Settings, go to the Advanced Tab and go down to Transitions. From this one area, you can control all the transitions to all the hover effects you have added to this module. There is only one setting for all transitions – you will not be able to set different durations and such to each hover effect we have put in our Call To Action module.

So as you can see – there are thousands of variations you can accomplish with Divi’s built-in Hover Effects. This functionality can be found in all areas of the Divi Builder – just look for the little pointer icon. You can find it in almost every module including Blurb, Text, Image and so on. Hover effects will enhance your visitors user experience and give a little life to your Divi pages.

I hope this article was of some use to you. If it was, give Divi Ready Themes a Like on Facebook, and Subscribe to our YouTube Channel. Our premium themes are available on our site at https://divireadythemes.com.  Our Divi Child Themes are available for a variety of niche markets including Legal Firms, Construction companies, Cleaning Services, Church Websites and many more. All of our Child Themes and Divi Layouts come with an easy One-Step Demo import so you can get your site looking like the demo in no time.  

We believe that a website is like a painting; a piece of art. Like a “self-portrait” of your company, your product – you. At Divi Ready Themes, we are artists, our computer screens our canvases. When the portrait is finished – you immediately recognize it for what it is. Our pixel-perfect themes are filled with beautiful, royalty-free images that will save you loads of project time. Have a problem? Send us a message and we will get right back to you. We are here to help!