How to Add a Hover Effect in Divi Builder

Updated: July 6, 2021

One of the advantages of using a page builder like Divi Builder on your WordPress site is that you can add animation effects to a page without needing to install an additional plugin. One of the animation types you can add is the hover effect, which will react when a visitor points her/his cursor to a certain element on a page. Take a look at the GIF below.

As you can see, the image elements on the GIF above make a certain move when the cursor is pointed to them.

Divi Builder allows you to add a hover effect to any element. Be it the section, row, column, or module. Divi Builder itself makes use of CSS transform for the hover effect. There are 5 hover effect options you can add:

  • Scale
  • Translate
  • Rotate
  • Skew
  • Origin

In Divi Builder, you can use a different setting on an element for the normal state and the hover state. For instance, you can use a different background on both the normal state and the hover state. Thanks to this, you can, for instance, change an image on hover by making use of the Divi Builder built-on hover effect feature. Another fun thing when adding a hover effect in Divi Builder is that you can set the transition duration (the transition from the normal state to the hover state). Here is how to add a hover effect in Divi Builder.

How to add a hover effect in Divi Builder

As mentioned, you can add a hover effect to any element in Divi Builder. In this example, we will show you how to add a hover effect to an image module.

First off, add a new module by clicking the grey plus icon on the canvas area and select Image. Select an image you want to use.

On the Image module settings panel, go to the Design tab and open the Transform block. On the Transform block, click the cursor icon followed by the hover tab (which is also represented by a cursor icon).

Select a transform style you want to add and use your mouse to set the transform value. Or, if you want to set a specific transform value manually, you can also do so. Simply type your desired value on the available fields.

Setting the transform duration

To set the transform duration, you can go to the Advanced tab on the settings panel and open the Transitions block. You can set the transform duration on the Transition Duration option. From this block, you can also set the transition delay as well as the transition speed curve.

Make sure to click the green checklist icon on the bottom-right corner of the settings panel once you are done making the settings.

You can go through the same route to add a hover effect to other elements. To add a hover effect to a section, you can open the section settings panel by clicking the gear icon on the section handle (the blue handle). To add a hover effect to a row, you can open the row settings panel by clicking the gear icon on the row handle (the green handle). To add a hover effect to a column, you can open the row settings panel. You can read this article to add a hover effect to a column in Divi Builder.

Original posted on: January 4, 2021

This page may contain affiliate links, which help support WP Pagebuilders.

Leave a Reply

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

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Support Us

Consider subscribing to help us grow. Get the regular articles about page builder plugins and WordPress in general.