Search

How to Add Hover Effect in Divi Image Module

An interactive technique that provides feedback and improves user experience frequently uses a hover effect. The element changes look, motion, or functionality when the user hovers over it.

There are several hover effects, such as image effects, tooltips, color or style changes, interactive overlays, and animation. Each hover effect has its own use, depending on your website’s design and purpose.

This article will show how to add the hover of image effect in the Divi Image module.

2D Transform: Scale/ Zoom-in

Steps to Add Hover of Image Effect in Divi Image Module

Method 1: Adding Custom CSS and CSS Class

Step 1: Add the CSS Snippet

First, we will add a custom CSS to the Divi Theme. On your WordPress dashboard, go to Divi -> Theme Options. Once you enter the Divi Theme Options page, navigate to the General tab -> Custom CSS section.

Copy the CSS snippet below and paste it into the Custom CSS input field.

.hover-image-effect:hover img {
transform: scale(1.1);
transition-duration: 0.5s;
}

Once you add the CSS snippet into the Custom CSS field, apply the changes by clicking the Save Changes button.

The CSS Code Explanation:

  • .hover-image-effect:hover img; This is a CSS selector that targets the img (image) element within an element that has the unique CSS class name “hover-image-effect“, and :hover is a pseudo-class selector that targets that element when it is being hovered over by the user.
  • transform: scale(1.1); This property transforms the image by scaling/ zoom-in up to 1.1 times its original size. You can replace the value “1.1” with your preferred weight of the zoom-in effect.
  • transition-duration: 0.5s; This property specifies the duration of the transition effect. In this case, we set the transition duration to 0.5 seconds, meaning the scaling/ zoon-in effect will take half a second to complete. You can adjust the value to make the transition faster or slower according to your preference.

By combining these styles, the code creates a hover effect on the image module, which smoothly scales up to 1.1 times its original size with a duration of 0.5 seconds.

Note: Scale transform/zoom-in is a common and popular hovering effect style used on websites. If you want to know more about others’ hovering effect transform methods, you can visit this page.

Step 2: Add the Unique CSS Class Name

Alright, now we move on to the next step. It’s time to add the unique CSS class name to the image module/s you want to enable the hover effect.

Go to the Divi Builder and navigate to the page where you want to add the hover effect to the Image module.

On the module settings -> Advanced tab -> CSS ID & Classes. Afterward, add a unique CSS class name to the CSS Class input field.

Note: The unique CSS class name you add must be the same as the CSS class name you’ve added in the Custom CSS. In this example, we enter “hover-image-effect“.

Now, when you hover over the Image module on your page, the specified CSS styles will be applied.

Method 2: Adding Hover Effect to Individual Image Modules

Well, adding a hover effect to individual Image modules is more straightforward than the previous method; you only need to add a very simple CSS snippet to the Image module.

Go to the Advanced tab -> Custom CSS -> Main Element on the module settings. Once you enter the Main Element section, please enable the hover option by clicking the cursor/hover icon.

Afterward, copy the CSS snippet below and paste it into the hover input field.

transform: scale(1.1);
transition-duration: 0.5s;
CSS 2D Transform: Scale/ Zoom-in

That’s it. You can exit from the visual builder to see how the hover effect is worked on your Image module.

Like the previous method, you can customize the hover effect and style by editing the values on the CSS snippet you’ve added to the module. For example, we will show you another 2D Transform style, Rotate.

CSS 2D Transform: Rotate

The Bottom Line

This article demonstrates how simple adding a hover image to the Divi Image module is. We gave you two methods and examples of hover styles (scale/zoom-in and rotate) included in CSS 2D transforms. Customize and play around with all the hover effect styles until you find the best hover effect for your site.

In conclusion, the significance of including hover effects on images varies depending on your particular needs and considerations. Yes, it can improve user experience, offer visual feedback, and add interactivity, but its implementation must be careful and in line with your design objectives and user requirements.

If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud and access any website you create.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.