In this tutorial, we will learn about adding the Zoom-In hover effect to Divi Image Module using custom CSS on your WordPress Divi Website.
CSS Class: et-zoom-in
CSS code:
.et-zoom-in.et_pb_image:hover img,
.et-zoom-in .et_pb_image_wrap:hover img,
.et-zoom-in a:hover img {
transform: scale(1.3);
transition: all 2s 0s ease;
}
.et-zoom-in,
.et-zoom-in a {
overflow: hidden;
}
.et-zoom-in.et_pb_image img,
.et-zoom-in .et_pb_image_wrap img,
.et-zoom-in a img {
transition: all 1s 0s ease;
}
Hope you like the tutorial!
Hello, Great video – Thank you, question: When I use this code the box shadow that I have under my image becomes non visible. Is there a way to keep the box shadow active and still have the zoom in work as well? Thank you!
please share website link
can you have a look at this for me please??? I want to epand the image below on a smartphone but cant find the correct code to be able to return to original size after zoom in has been effected. Image resumes original size when viewing on desktop but wont return to original size on other devices???? Can you please assist???