How To Add An ‘Image Zoom’ Effect In Divi

by | Jul 15, 2016

In this video tutorial, I’ll walk you through how to add a cool “zoom” effect to your images. You can download the CSS & Script code here.

And in case you missed it, Josefin is packed with all sort of additional features and add-ons since it was originally released. Check out some of these other tutorials!

And if you’d like to purchase the Josefin Theme, featured in these tutorials, you can do so here. Enjoy! =)

by John Wooten

John is an owner at BeSuperfly and also owns Artillery Media, which he started in 2006. After touring full-time as a musician and serving in the Marines, he eventually settled down and started building Artillery not only as a custom web design firm, but also as a birthplace for creativity in the heart of the Midwest: Lincoln, Nebraska. He loves talking entrepreneurship and everything drums.

more posts

33 Comments

  1. Terry Hale

    Nicely done, John!! Your tutorials are amazing. 🙂

    Reply
    • John Wooten

      Thanks Terry! =)

      Reply
  2. Colin

    Boom, that is amazing – thanks so much John, that just saved me a lot of hassle – and I really like your video talking me though it… I am (slowly) starting to get my head around jQuery! 🙂

    Reply
    • John Wooten

      You bet Colin! Thanks for reading! Be sure to be on the lookout for our new theme coming out soon…

      Have a great day! =)

      Reply
  3. Chris Love

    Great tutorial… How would I do this with the blog post images that show up in the divi grid module? I’ve been banging my head and can’t get it going.

    Reply
    • John Wooten

      Chris,

      Thanks! I worked that feature into the ANTHEM theme we sell.

      It looks like I had this code in the “head” code for the Divi Theme Options > Integration…wrapped in “script” tags (It won’t let me do that here in the Comments):


      jQuery(document).ready(function($) {
      $(".et_pb_post img").wrap("

      ");
      })

      And the following CSS with a class of “anthemBlog” on the Section and a class of “anthemBlogImageGrow” on the Blog module:


      .anthemBlog .anthemBlogImageGrow .et_pb_image_container {
      overflow: hidden;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translateZ(0) scale(1.0, 1.0);
      }
      .anthemBlog .anthemBlogImageGrow .et_pb_post .et_pb_image_container img {
      vertical-align: bottom;
      -webkit-transition: -webkit-transform 0.5s ease;
      -moz-transition: -moz-transform 0.5s ease;
      -o-transition: -o-transform 0.5s ease;
      transition: transform 0.5s ease;
      }
      .anthemBlog .anthemBlogImageGrow .et_pb_post:hover .et_pb_image_container img {
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -ms-transform: scale(1.1);
      -o-transform: scale(1.1);
      transform: scale(1.1);
      }

      That should work… if not, I’d suggest purchasing ANTHEM… =)

      Have a great day! =)

      Reply
      • Taulant

        Thank you, this worked very well with Divi!!

        Reply
  4. Paul

    Hi
    I tried to apply this to a background image in a CTA module….with no luck !! Any pointers you could give me to make this work would be greatly appreciated.

    WP 4.8
    Divi 3.0.60

    Many thanks

    Reply
    • John Wooten

      Paul,

      Hi! This particular method won’t work on a background image. =(

      However, you should check out this tutorial…it may help achieve what you’re trying to do: https://www.youtube.com/watch?v=qFnxPI7gc7U

      Good luck and thanks for watching! =)

      Reply
      • Paul

        Thank you for your reply and the link.

        I will give that a try

        Many many many thanks indeed 🙂

        Reply
  5. Adhi Hermavan

    Hi
    Thanks you ! this Nice tutorial for me…
    i’m looking for 3 days ago and now, i found it.

    Reply
  6. MrRobato

    Hi, I have some code that zooms in images in the Divi Gallery Module that works for me:

    .et_pb_gallery_image img {
    transition:all 0.5s;
    -moz-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    }
    .et_pb_gallery_image:hover img {
    transform:scale(1.1);
    -moz-transform: scale(1.1);
    }

    Reply
  7. Caro

    The link is no longer available. But nice.

    Reply
  8. Jono

    This worked out really well and was exactly what I was hoping to achieve. Thanks for the tutorial!

    Reply
    • John Wooten

      Awesome! Glad it worked well for you! =)

      Reply
  9. Ryan B

    This is awesome! Thank you so much! Super simple and easy to apply. Saved me a ton of time.
    I’m wondering if it’s possible to add this effect to circular images? I already have a class for the border-radius to be 50% for the image.

    Reply
    • John Wooten

      It may make the circle grow with the image … but it’s worth a shot! Let us know if it works!

      Reply
      • Ryan Berg

        So when the image “zooms in”, the now-larger circle is cropped by the square div. So it basically looks like a square with rounded corners on the hover. Ah well.

        Reply
        • John Wooten

          Ah I see. You could probably use CSS Mask Shapes to do this … or some kind of jQuery … =)

          Reply
          • Ryan Berg

            Cool. Thank you much.

  10. lydia

    Hello,

    The link to the css is not working. Can I find it anywhere?

    Reply
  11. pluggedbean

    Hi John
    It seem the link is no longer working, can you please drop us a update THX for the awesome themes !

    Reply
    • John Wooten

      Hi pluggedbean,

      The server is down at the moment. I’m hoping it’ll be up soon… Thank you!

      Reply
    • John Wooten

      pluggedbean, give it a try now. The server is back up. They said it was a rare Apache issue.

      Reply
  12. Ashleigh

    This is perfect, thank you!

    Reply
    • John Wooten

      Awesome!

      Reply

Submit a Comment

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