Continuing The Divi Blog Series
Adding A Nice Zoom And Rotate Image Hover Effect
We are working through a series of tutorials on the Divi Blog module, which is really fun and exciting. We building up to some really amazing tutorials that combine a lot of the other individual tutorials, so be sure to check back often for all the good stuff that’s coming. I wanted to have a nice hover effect included in this series, so I’m going to show you how to add a hover zoom and rotate effect to the Divi Blog module featured images.
▶️ Please watch the video above to get all the exciting details! 👆
Divi Blog Image Zoom And Rotate Hover Effect
At first I was only going to show the zoom effect, but I thought it would be fun to add a slight rotation to the image as well. This snippet will do both, but if you want, you can change this. I’ll show you how to change the values in the video, so be sure to watch that as well.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*adjust the image spacing*/
.et_pb_post .entry-featured-image-url {
margin: 0;
}
/*keep the zoomed in image inside the image frame*/
.et_pb_blog_grid .et_pb_image_container {
overflow: hidden;
}
/*add a smooth transition for the zoom effect*/
.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;
}
/*make the featured image zoom in on hover*/
.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);
}
Great tutorial, thanks! Quick question… how can we add this hover effect to the “non grid” version of the blog module? In your previous tutorials, you’ve been using the “fullwidth” as opposed to the “grid” setting for the blog module modifications. Can we use the hover effect on the “fullwidth” module setting? And finally, m can we use the hover effect along with the other modifications (e.g. column number and list styling)? Thanks.
Hi Chis, sure, you can do this to fullwidth or grid. Those are just column layouts. And yes, you can add multiple things as many as you want as long as they are not conflicting doing the same thing.