Divi Hover Options are available for any content or element you add to a page in Divi.

You can add hover effects to text, icons, links, images and more within a module. Or you can add hover effects to entire modules, columns, rows, and/or sections.

This allows creativity to soar, enabling designers to create fun, interactive elements on their Divi websites. Customizing hover options is easy and is accessible anywhere in the Visual Builder.

You can apply hover states to the content, design, and advanced settings of virtually any Divi design element (sections, rows, columns, and modules).

Changing your page content on hover (elements like text, images, buttons, blurs, and more) is possible. In the video below, you will see an image change on hover and the text of the button on hover.

You can also change design settings on hover, like background colors, font styles, filters, transformations, and more. Check out the video below to see an example of what's possible.

Hover options are available in virtually all of Divi's design elements! This includes Sections, Rows, Columns, and Modules.

You can access hover options in the same location as regular customization options in the settings modal. This allows you to customize an element's background design for both the default desktop view and the hover state in one convenient location.

In this example, let's change the button text on hover so that the button behaves like this on hover:

For this example, let's change the button background color on hover.

To add custom CSS on hover to the button module:

While hover effects are available in all Divi elements, you'll likely use them mostly within modules. Here are a few examples of how you can use hover options!

To change a blurb's background color on hover, follow these steps.

And here's the result!

To change the blurb icon on hover, follow these steps:

And here's the result!

Here is the final result:

Hover options are available within sections, rows, and columns, too.

In the example below, let's change a column's background color on hover.

And here is the final result:

You can also change content, design, and advanced options on hover with Sections and Rows. Use the same steps above to access those.

When hover effects are applied to an element, there is a default speed and duration that they happen.

You can tweak the hover effect's speed and duration by navigating to the Advanced tab → Transitions and adjusting the available controls.

You can adjust the hover effect's duration, delay, and speed curve. Transition settings are in the Advanced tab of modules, columns, rows, and sections.

You can change how your hover effects behave by combining hover options and transition effects. You can control the duration of the transition by adjusting the duration slider.

Additionally, you can set a delay for your transition if you'd like it to start before or after another transition effect.

Lastly, there is an option to set the speed curve using several different options.

Taking the same example as above, we'll adjust the transition duration to 0ms, with no delay, and the transition speed curve will be set to Linear.

See how much faster and snappier it is? Tweaking these settings allows you to create custom transitions that achieve your desired effect.

Combining Transform options with Hover options gives you the power to create even more dynamic designs.

Below is an example of some effects you can achieve when combining these two options.

To learn how to recreate this demo, check out this blog post.

Check out our Transform Options Guide to learn more about Transform Options.

Hover options are activated when hovering over the space of a specific Divi element. Hover space refers to the entire element and the space within it.

When applying hover effects in Divi, it’s important to remember the hierarchy of Divi’s Sections, Rows, Columns, and Modules.

These are called parent and child elements.

Child elements are nested inside parent elements and are affected by any design style you apply to the parent element.

To understand how Divi Hover options work, it's important to note that they are set at the element level. Each Divi element has its own hover space, which is the element's size.

Here is an illustration of Divi's hover space for each building block element.

Each element has built-in hover options activated when hovering over that element or any of the child elements it contains.

Hovering over a module will also trigger the hover effects of its parent elements. However, when you hover over just a section, it will not trigger the module hover effects.

Let's look at some practical use case examples of where you would use hover options.

It is always a good idea to use hover options on buttons to encourage users to click.

With Divi, you can add simple and creative hover effects to icon buttons. This also includes social media follow buttons as well.

Check out this tutorial on creating unique social media follow button hover effects in Divi.

With Divi's hover effect, you can easily change the design of your images on hover creatively.

This is great for images and image galleries that allow the user to see an alternative image design (like a black-and-white version of the image) on hover.

Plus, you can combine this hover effect with clickable lightbox functionality.

By adjusting the opacity of your elements, you can show or hide elements on hover. Modules such as buttons, images, social media, or even full-content sections can be manipulated to create stunning effects with hovers.

This is perfect for a call to action or for showcasing featured products.

For more, check out how to change content on hover to create unique CTAs in Divi.

Hover options are applied to each element. However, it can create simultaneous hover effects when hovering over child elements.

Now, whenever hovering over an element, it will activate the hover effects for each element simultaneously.

Below is a Row, Column, and Module that all share the same hover space. Therefore, hovering over their shared area will simultaneously activate each hover option.

For more, check out how to trigger hover effects on elements simultaneously in Divi. You can also get creative by combining hover effects on multiple elements to reveal content cleverly.

For example, you can create pop-out service descriptions when hovering over a multiple-column row in Divi.

Additionally, you can combine hover options and visibility settings to achieve some cool effects.

For more, check out How to Highlight a Hovered Blurb Module by Blurring the Other Ones with Divi.

There's no limit to Divi's Hover Options. However, there are a few things to keep in mind when you are deploying them.

Changing the style of an element on hover will prompt the user with some further engagement or call to action (like clicking on the element).

That's why, in most cases, hover effects are used on buttons because most people will think that the hover effect means it is clickable. Thankfully, Divi allows you to add a link URL to any element to make it clickable, in addition to hover options.

Of course, you can also do other purposeful hover effects, like revealing additional content to engage the user to read more about a feature. But, in most cases, it's best to avoid adding hover effects strictly for design's sake.

This may affect the user experience negatively, leaving them needing clarification about the purpose of the hover effect.

It's generally a good idea to only apply hover effects on desktop views. While hover effects can be applied to mobile devices, they are discouraged because users usually have to double-tap to see the effect.

This can confuse and frustrate your site's visitors, or they may miss the effects altogether. Good use of animation is encouraged, but keep the user's experience in mind when using them.

Using hover effects to highlight an important site area is a great idea to draw your visitor's attention. Any micro-animation hover effect on a link or button will help users understand it is clickable.

Consider using a hover effect to change an important line of text or a call-to-action module. When deciding which elements to use hover effects on, consider your options carefully. Modules such as Buttons, Call to Action, and Blurb are great options to help get your message across.

Another idea would be to use hover options on columns containing important information. Differing background colors on hover is an excellent way to highlight content.

While animation and interactive elements are a great way to boost user engagement, be careful to do what is necessary.

Using too much animation or visual effects can confuse visitors. This could cause them to miss your message altogether. Keep effects to a minimum and only highlight the most important areas of your pages.

When using transform options on hover, consider avoiding transform translate to move an element on hover.

This will cause jumping in some cases when the cursor falls outside the element during the hover effect. Using a transform scale (in addition to translating and/or rotating) to increase the element's size is a good way to achieve the look you are going for without distracting your users with jumpy, unpredictable results.

Transition hover options are perfect for icons or icon buttons because you can add micro-interactions (like scale or rotate) to make them more engaging.

Transform rotation works best on circular elements. To make any element circular, set the rounded corners option values to 50% on all four corners.

Hover options can help you create stunning layouts in Divi. To learn how to create some of the effects we feature in our post, check out these great tutorials to sharpen your design skills while learning how to use Divi's hover options.