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);
}
2

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.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Chris
Chris
24 days 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!

Child Themes • Plugins • Layouts

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart