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! =)
Nicely done, John!! Your tutorials are amazing. 🙂
Thanks Terry! =)
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! 🙂
You bet Colin! Thanks for reading! Be sure to be on the lookout for our new theme coming out soon…
Have a great day! =)
John, 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!
Colin,
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
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.
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! =)
Thank you, this worked very well with Divi!!
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
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! =)
Thank you for your reply and the link.
I will give that a try
Many many many thanks indeed 🙂
Hi
Thanks you ! this Nice tutorial for me…
i’m looking for 3 days ago and now, i found it.
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);
}
The link is no longer available. But nice.
Sorry about that…try this: http://artillerymedia.co/josefin/addons/imageZoom/imageZoom.zip
Hi John,
Your link to the CSS
http://josefin.artillerymedia.com/addons/imageZoom.zip
Doesn’t work for me?
Thanks
Sorry about that…try this: http://artillerymedia.co/josefin/addons/imageZoom/imageZoom.zip
This worked out really well and was exactly what I was hoping to achieve. Thanks for the tutorial!
Awesome! Glad it worked well for you! =)
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.
It may make the circle grow with the image … but it’s worth a shot! Let us know if it works!
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.
Ah I see. You could probably use CSS Mask Shapes to do this … or some kind of jQuery … =)
Cool. Thank you much.
Hello,
The link to the css is not working. Can I find it anywhere?
lydia, here you go!
http://artillerymedia.co/josefin/addons/imageZoom/imageZoom.zip
Sorry about that! =/
I like this tutorial.
CEO : https://www.divisiteexamples.com/
Hi John
It seem the link is no longer working, can you please drop us a update THX for the awesome themes !
Hi pluggedbean,
The server is down at the moment. I’m hoping it’ll be up soon… Thank you!
pluggedbean, give it a try now. The server is back up. They said it was a rare Apache issue.
This is perfect, thank you!
Awesome!