There are a lot of ways to make a web page on your website looks more attractive. One of which is that you can add a hover effect to a certain element on the page. If you have a WordPress-based website built with Divi Builder, you can effortlessly add a hover effect to an element on your page. What is Divi Builder, by the way?

In case you haven’t known about Divi Builder. It is a page builder plugin for WordPress just like Elementor (Elementor is the most popular WordPress page builder plugin). It also comes with a visual editor to make it easier for you to create the page. Divi Builder comes with some built-in features to add animation effects, including the ones you can add when a visitor hovers on a certain element on your page. Take a look at the screencast below.

The hover effects above are created with Divi Builder. Divi Builder itself makes use of CSS transform for the hover effect feature. So technically, when you add a hover effect to a certain element in Divi Builder, you are implementing CSS transform to your page.

In Divi Builder, design element falls into three types: section, row, and module. You can add a hover effect to those three element types. In this example, we will show you how to add a hover to an image module (as you can see on the screencast above).

How to add a hover effect in Divi Builder

First, you need to prepare a section as well as a row on the canvas area of Divi Builder. To do so, click the blue plus button to add a new section (you can add a regular section for this example). Insert a row and select the column structure according to your need. In this example, we select the three-column structure.

Once the row is added, click the grey plus icon on one of the columns to add a module. Since we want to add the hover effect to the image then select Image to add the Image module.

The Image module settings panel will appear right after you add the Image module. To add an image, you can click the image holder on the Image block under the Content tab.

Once the image is added, go to the Design tab and open the Transform block. On the Transform block, click the cursor icon and then click the hover tab (which is also represented with a cursor icon).

Select a transform type you want to add by clicking one of the available tabs and use your mouse to set the value. Or, you can also set the transform value manually by typing your preferred value.

That’s it. You can apply the changes by by clicking the green checklist icon on the bottom-right corner of the settings panel.

In order to make your page more attractive, you can also display a different image on hover. You can this article to learn more.

You can go through the same route to add a hover effect to a section and row. First, open the settings panel and then go to Design tab. On the Design tab, you can open the Transform block. You can set the hover effect on this block as we have just covered above.

Often create WordPress websites with Divi? You can make use of Divi Cloud to store Divi assets such as theme builder templates, page layouts, code snippets, and so on. You can then access these assets from any website you build with Divi. For a better site performance, you can also consider using Divi Hosting.