Hover effects are a great way to add visual interest and interactivity to your Divi blog posts. When a user hovers over a featured image, it can zoom in, out, rotate, or change color. This can help draw attention to your images and encourage users to read your posts.
Previously, we have written a post about how to add a hover effect to a featured image/post thumbnail in the Divi Blog module by directly adding a CSS snippet to the image element in the module. While the method worked fine, there was a little issue with the effect whereby the image was out of the module container.
This article will solve that issue and make your posts more aesthetic and visually appealing to your users.
How to Add Hover Effect on Featured Image in Divi Blog Module
You can use two ways to add a hover effect on the featured images in the Divi Blog module. Each method has a different purpose: applying the CSS snippet to the entire website or just for the specific page.
.et_pb_post .entry-featured-image-url { margin: 0; } .et_pb_blog_grid .et_pb_image_container { overflow: hidden; } .et_pb_blog_grid .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_grid .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); }
Entire Website
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 above and paste it into the Custom CSS field.
Adding the above CSS snippet to Theme Options means applying the snippet to the entire website. In this case, every featured image in the Blog module will have the same style (zoom hover effect).
Once you add the CSS snippet into the Custom CSS field, apply the changes by clicking the Save Changes button. You can create or open your page with a Blog module to see the result.
Specific Page
Go to the Divi Builder, create new content, or select the existing one with a Blog module inside that page.
Next, add the Code module and place it wherever you want; in this example, we place the Code module under the Blog module.
Copy the CSS snippet above and paste it into the Code input field. Make sure to place the snippet between the <style></style>
tag.
The Bottom Line
Adding a hover effect to featured images in Divi’s Blog module can enhance your website’s visual appeal and user engagement. Whether you apply the effect to your entire website or specific pages, the provided CSS snippet allows you to achieve the desired hover effect easily.
Feel free to modify the hover effect by editing the values in the CSS snippet above. For example, if you want to add a slight rotation effect, you can edit the rotation value in this property “-webkit-transform: scale(1.15) rotate(1deg)
“.
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 from any website you create.