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.
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;
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.
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.