Adding Zoom Effect on Hover to Post Thumbnail on Divi Blog Module

Divi comes with a built-in module called Blog dedicated to displaying content on your WordPress website. The elements you can display on your content feed include post thumbnail/featured image, post title, and post meta (author, date, and so on). Several built-in styling options are available to style up each element. Unfortunately, there is no built-in option to add a zoom effect -- or other effects -- on hover.

In this post, I will show you how to add a zoom effect to the post thumbnail on Divi blog module.

Steps to Add Zoom Effect on Hover to Post Thumbnail on Divi Blog Module

Although Divi has no built-in option to add a hover effect to the post thumbnail on the Blog module, you can achieve it via custom CSS. In Divi itself, you can add custom CSS to a certain module element directly without defining the selector. You can access the custom CSS feature by going to the Advanced tab on the module settings panel. Simply open the Custom CSS block.

The text editor fields available on the Custom CSS block varied, depending on the module. On the Blog module itself, you can find a Featured Image field. As you can guess, you can use the editor field to add custom CSS to the post thumbnail. You can actually add a hover effect directly to the post thumbnail via this field by switching to the hover mode (by clicking the cursor icon). However, the result is a bit weird as you can see on the animated GIF below.

There is a better way to add hover effect to the post thumbnail on the Divi blog module.

The steps I will below involve selector declaration. You can read my previous post to learn more about how to use CSS selector on Divi.

First, add the Blog module and set the layout to Grid. Make sure to enable featured image on the module. Style up the blog per your preference. Once done, add a Code module and paste the following snippet:

<style>
.et_pb_post .entry-featured-image-url {
    margin: 0;
}
.et_pb_blog_0 .et_pb_image_container {
    overflow: hidden;
}
.et_pb_blog_0 .et_pb_image_container img {
    transition: all 0.95s ease;
    -moz-transition: all 0.95s ease;
    -webkit-transition: all 0.95s ease;
}
.et_pb_blog_0 .et_pb_post:hover img {
    transform: scale(1.15) rotate(1deg);
    -moz-transform: scale(1.15) rotate(1deg);
    -webkit-transform: scale(1.15) rotate(1deg);
}
</style>

The above snippet (credit to UtilizeWP) will result in the following hover effect.

You can change the hover effect by editing the transform: scale(1.15) rotate(1deg); line on the above snippet. You can refer to this page to learn more about CSS transform.

If you apply the CSS snippet above using the Code module, the effect will only apply on the current page only. If you want to apply it to all Blog modules on your website, you can place the snippet to Divi Theme Options.

Code Explanation

First, the code adjusts the image spacing using the margin property. Next, it keeps the zoomed image in the frame using the overflow property. The transform property is used to add the zoom effect on hover, while the transition property adds a smooth transition for the zoom effect.