How To Add A Hover Zoom And 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

Nelson Miller Pee Aye Creative
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.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Please share this post!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

10 Comments

  1. Chris

    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.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
  2. Hess

    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.

    Reply
    • Hemant Gaba

      Hey Hess,

      Could you please share the URL of the page for me to investigate it further?

      Reply
  3. David Allworthy

    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?

    Reply
    • Hemant Gaba

      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.

      Reply
  4. Birol

    Thx for Great tutorials.

    How can I replicate this effect for a divi filterable portfolio module?

    Best regards

    Reply
    • Hemant Gaba

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

      Reply
    • Hemant Gaba

      Hi Nadine!

      Could you please share the URL of the page for me to investigate it further?

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart