How To Add An ‘Image Zoom’ Effect In Divi
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! =)
Terry Hale
July 16, 2016Nicely done, John!! Your tutorials are amazing. 🙂
John Wooten
July 16, 2016Thanks Terry! =)
Colin
October 4, 2016Boom, 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! 🙂
John Wooten
October 4, 2016You bet Colin! Thanks for reading! Be sure to be on the lookout for our new theme coming out soon…
Have a great day! =)
Colin McDermott
November 1, 2016John, not ashamed to say have had to come back to this post again for more help – thanks again – and will be on the lookout for your new theme!
John Wooten
November 1, 2016Colin,
I have to come back to some of my tutorials as well as I forget how I did them to begin with…lol =)
My new theme is out! It’s called ANTHEM.
Demo: http://anthem.madebysuperfly.com
Purchase here: https://besuperfly.wpengine.com/product/anthem-child-theme/
Have a great day! =)
-John
Chris Love
April 17, 2017Great 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.
John Wooten
April 17, 2017Chris,
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! =)
Taulant
October 17, 2018Thank you, this worked very well with Divi!!
Paul
July 6, 2017Hi
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
John Wooten
July 6, 2017Paul,
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! =)
Paul
July 7, 2017Thank you for your reply and the link.
I will give that a try
Many many many thanks indeed 🙂
Adhi Hermavan
September 2, 2017Hi
Thanks you ! this Nice tutorial for me…
i’m looking for 3 days ago and now, i found it.
MrRobato
September 20, 2017Hi, 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);
}
Caro
January 2, 2018The link is no longer available. But nice.
John Wooten
January 23, 2018Sorry about that…try this: http://artillerymedia.co/josefin/addons/imageZoom/imageZoom.zip
Matt
January 23, 2018Hi John,
Your link to the CSS
http://josefin.artillerymedia.com/addons/imageZoom.zip
Doesn’t work for me?
Thanks
John Wooten
January 23, 2018Sorry about that…try this: http://artillerymedia.co/josefin/addons/imageZoom/imageZoom.zip
Jono
April 13, 2018This worked out really well and was exactly what I was hoping to achieve. Thanks for the tutorial!
John Wooten
April 13, 2018Awesome! Glad it worked well for you! =)
Ryan B
April 13, 2018This 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.
John Wooten
April 13, 2018It may make the circle grow with the image … but it’s worth a shot! Let us know if it works!
Ryan Berg
April 13, 2018So 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.
John Wooten
April 13, 2018Ah I see. You could probably use CSS Mask Shapes to do this … or some kind of jQuery … =)
Ryan Berg
April 18, 2018Cool. Thank you much.
lydia
April 23, 2018Hello,
The link to the css is not working. Can I find it anywhere?
John Wooten
April 23, 2018lydia, here you go!
http://artillerymedia.co/josefin/addons/imageZoom/imageZoom.zip
Sorry about that! =/
shaukat Ansari
May 26, 2018I like this tutorial.
CEO : https://www.divisiteexamples.com/
pluggedbean
August 13, 2018Hi John
It seem the link is no longer working, can you please drop us a update THX for the awesome themes !
John Wooten
August 13, 2018Hi pluggedbean,
The server is down at the moment. I’m hoping it’ll be up soon… Thank you!
John Wooten
August 13, 2018pluggedbean, give it a try now. The server is back up. They said it was a rare Apache issue.
Ashleigh
February 9, 2019This is perfect, thank you!
John Wooten
February 9, 2019Awesome!