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);
}
Hi Nelson,
huge fan of your divi tutorials – thanks for that!
I’ve tried to combine two of your design hacks for the divi module (this one here and this one: https://www.peeayecreative.com/how-to-move-the-divi-blog-title-text-and-button-over-the-image/).
It works very well but on hover the color overlay from the “text over image” tutorial disappears.
Do you maybe have a fix for that?
Thanks again & best for you.
Hi Nadine!
Could you please share the URL of the page for me to investigate it further?
Thx for Great tutorials.
How can I replicate this effect for a divi filterable portfolio module?
Best regards
Hi Birol!
Please use the following code for the filterable portfolio module:
.et_pb_portfolio_item .et_portfolio_image {
overflow: hidden;
}
.et_pb_portfolio_item .et_portfolio_image img {
transition: all 0.95s ease;
-moz-transition: all 0.95s ease;
-webkit-transition: all 0.95s ease;
}
.et_pb_portfolio_item:hover img {
transform: scale(1.15) rotate(1deg);
-moz-transform: scale(1.15) rotate(1deg);
-webkit-transform: scale(1.15) rotate(1deg);
}
Hi Nelson
Your tutorial is excellent – thanks so much.
May I ask, how do you get it so the images are better quality on the zoom effect? See my website below: mumii.co.uk, you’ll see on the main Blog posts with the zoom effect they look a bit blurry but on the actual post (which is the same image) they are perfectly crisp.
Do you have any ideas on how to make the image on the zoom crisp?
You are welcome, David!
After visiting the website, I discovered that the problem is with the image, not the code. Whether the image is hovered over or not, it appears similar. The blog image appears to be being cropped.
You can check this guide: https://help.elegantthemes.com/en/articles/2918989-blog-images-are-being-cropped
However, I advise getting in touch with the Divi support team. They’ll assist you in resolving the problem.
Hey there, thanks for the awesome articles.
I tried this snippet, but when hovering over a blog grid element, the image jumps-zooms, doesn’t do a smooth transition. What could cause that?
Thanks for your time,
H.
Hey Hess,
Could you please share the URL of the page for me to investigate it further?
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.