[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! 👉Get This Deal
Mark Hendriksen Logo

How to Create Divi Hover Effects

Mark Hendriksen | February 4, 2023 | 0 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

You want to add some hover effects to your Divi modules, but you’re not sure how.

Adding custom hover effects to your Divi website can be a great way to make your website more interesting and engaging for your visitors.

With this easy-to-follow guide, you’ll be able to add hover effects to any Divi builder in minutes.

Table of contents

How do I add hover effects in Divi?

It is very easy to apply Divi hover effects to your website. Not only are they easy to find, but you can apply Divi hover effects to almost any section, row, or module.

Just select the element you want to get creative with and Divi’s options panel will let you customize its appearance on hover.

Whether it is a transition from one color to another or an animated transformation, Divi’s hover effects give you the power to make your Divi page stand out from the rest!

I will give you an example of a button module, the button has a red background color and I will make it orange on hover.

When you hover with your mouse over the element title, some options will be visible. Click on the little arrow to open up the hover options.

Find the hover effects in Divi

Now you can click on the hover tab. And now you can set a background color for the hover state of this button.

Enable the hover options in Divi

This works the same for any other element like font sizes, text colors, shadow effects, background image, etc.

In the next sections, I will give you some examples of the most popular hover effects for some of the Divi modules.

How do I add a hover effect to the Divi image module?

With the image module, you can do a ton of really cool hover effects. I will give you some examples of popular Divi image hover effects.

Divi image swap

Open your image module and expand the image tab. Place an image in the default state tab and then switch to the hover tab and place an image here.

Swap a Divi image

Make sure your image size for both images is the same. When you hover over your image it will change to the second image (you need to disable the visual builder).

You will notice that the image transition duration is instant. Divi does come with transition options however, they do not work for image swap.

You can follow this tutorial, “How To Swap Image On Hover” to swap out images in Divi with a transition effect with some custom CSS.

Create an image overlay on hover

First, you have to place a link in your Divi image module. You have to do this in order to enable the overlay options for the image module.

This can be a dummy link.

Add a link in your Divi image module to enable overlay options

After that switch to the design tab and you will notice that the Overlay tab is visible. This is only visible when you have added a link.

From here you can add a hover overlay background color and icon.

Enable Divi overlay options

I recommend following my Divi image overlay tutorial to add advanced hover effects to your Divi overlay images.

How do you add a hover effect to the Divi blurb module?

You can create all sorts of hover effects for your Divi blurb modules in the Divi theme. I will show you 3, and explain which Divi module settings I have used to create the hover effects.

These are the 3 blurb modules I have created:

Divi blurb hover examples

I assume you know how to populate the blurb module so I will only cover the hover effects that I have used.

First blurb module

For the first module, I used a transform scale setting on the hover state. You can find this option under the Design tab > Transform. I set the hover state to 105%, so when you hover over the blurb module it will increase in size.

Transform hover option for Divi

Second blurb

For this blurb, I removed the shadow and replaced it with a border on hover. When you have added a shadow, you can then change the shadow color for the hover state, I set this to fully transparent.

Set the shadow to transparent

The border needs to be visible only on hover, to do this set the default state of the border color to fully transparent, and the hover state to a grey color.

Set the border hover color

Third blurb

For the last blurb, I have set the background color on hover to black (set the default color to white). You can swap the image with the same method as I have explained in the previous section. I have then changed the title text and body font color on hover.

Divi image hover module

Divi image overlay hover module

The Divi image hover module allows you to add hover effects to your images. This Divi plugin comes with more than 250 animations for your Divi images. It is the most versatile plugin for your images that is available on the Elegant Themes marketplace.

Key features

  • 250+ animation types
  • 5 hover effects for image swap
  • Style the lightbox

Conclusion

Adding Divi hover effects to your website is a great way to make it more interesting and engaging for visitors. With this easy-to-follow guide, you can add hover effects to any Divi builder in minutes.

If you have any questions please let me know in the comments.

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

Leave a Comment

0 Shares
Share
Pin
Tweet