Skip to main content
How to Add Zoom-In Hover Effect to the Image Module

Learn how to customize the Image Module to include a Zoom-in Hover effect.

Updated over a week ago

Adding interactive visual effects to your website can enhance user engagement and create a more dynamic browsing experience.

In this article, we will guide you through the process of adding a zoom-in hover effect to the Image Module in Divi.

Customize the Image module

  1. Open the Image module setting by clicking on the Gear Icon

  2. Go to Advanced Tab โ†’ Custom CSS โ†’ Free Form CSS

  3. Add the following CSS code:

    selector.et_pb_image:hover img,
    selector .et_pb_image_wrap:hover img,
    selector a:hover img {
    transform: scale(1.3);
    transition: all 2s 0s ease;

    selector a {
    overflow: hidden;

    selector.et_pb_image img,
    selector .et_pb_image_wrap img,
    selector a img {
    transition: all 1s 0s ease;

Note: If you want to change the animation slightly, you can play with the values in the above code.

You can find more information about different properties and values you can use in the CSS Transitions and Transforms for Beginners blog article.

Did this answer your question?