Code by Day | Explore By Weekend

How To Add A Hover Zoom Rotate Effect To The Divi Blog Grid Featured Images Tutorial by Pee Aye Creative

How To Add A Hover Zoom Rotate Effect To The Divi Blog Module Featured Images

This tutorial will show you how to add a very nice and pleasing hover zoom and rotate effect on the featured images to the Divi Blog module grid.

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.

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on 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);
}
9
Last updated Jan 3, 2021 @ 12:55 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Chris
Chris
5 months ago

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.

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,700 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart