Hover effects allow you to add animation to elements of your page when a user hovers the mouse over them and Divi has a built-in hover effects feature.
Some of the most common hover effects in Divi include changing the design styles, adding borders & drop-shadows, zooming using the transform options, and changing content on hover.
You can activate hover effects in Divi by clicking the hover effects icon (the mouse cursor icon) anywhere you see it in the Divi Builder. It is not always visible until you hover over a particular setting in the Divi Builder options.
What hover effects can I make?
You can add a hover effect to any section, row, module, or element in Divi and opt to change any Divi content settings, design settings, and advanced settings when the hover occurs.
This means you can change any setting that you make as a default setting to be applied on hover. With access to the advanced settings, you can create hover effects using your own custom CSS that will be activated on hover. The content settings allow you to change the content entirely as a hover effect so the possibilities really are endless.
How to add hover effects in a Divi Image module
The process to add hover effects is the same throughout the various places it is available in the Divi Builder, but for this example, we will show you how to add a hover effect using the Divi Image module.
Step 1. Add an image module to your page and upload an image. This is a standard image with no hover effects.
Step 2. If you hover your mouse over the image title you will see a row of icons appear. The 3rd icon is a triangular mouse pointer icon and this activates the hover effect options.
Step 3. Once you click on the hover effects icon you will see the desktop tab which has your original image, along with a new tab with the mouse icon which is the hover state. It will be the same as the original desktop image.
Step 4. To create your image hover effect you just need to upload your hover state image. Ideally, you will want to make it the same image ratio. 
You can now save and test your image hover effect and see that as you hover the mouse over the image it will swap from the original to the hover.
These simple steps above of clicking the hover icon are the same steps you can use to add hover effects throughout the Divi Builder.
With our image swap above you may also want to go into the advanced settings and add a scale transition to make the image slightly larger on hover, or add some filters in the Design tab. The options are endless to create hover effects on anything!
Adding hover effects using a Divi plugin
Whilst it is very easy to add hover effects yourself in Divi some people may not have the time, imagination, or design skills to create professional-looking hover effects themselves. As with many things in Divi, there are plugins created specifically to offer pre-made hover effects that can be activated with the click of a button.
A couple of hover effects plugins available in the official Elegant Themes marketplace include the Divi Image Hover plugin, the Divi Image Effect Lite plugin, and the Image Effect Pro plugin.
The plugins do offer some more advanced hover effects that cannot be achieved only with the built-in Divi hover effect options and may be a good option if you want some impressive hover effects without the skills to implement them yourself.
Conclusion
Adding hover effects in Divi is very easy with just the click of a button yet is often a feature many Divi designers do not fully take advantage of.
I see a lot of terrible Divi websites that overdo the animation, particularly with scroll effects. As with the scroll effects and any of the Divi features you have access to, it is always a good idea to lean on the side of caution and remember that less is more. Add subtle hover effects and animations and your site looks classy, yet add too many or make them too strong, and your site quickly becomes tacky.
Affiliate disclosure* – Links to Elegant Themes and 3rd party websites may contain affiliate code. You will never pay any extra for using these links but you will help keep Divi Theme Examples a forever-free resource for the Divi community. Thanks for your support.
