When I’m looking for a creative way to dress up a website, sometimes I’ll having images zoom-in or exhibit other hover effects.
Here is how to create those effects using Divi Image Modules.
In each case you assign a CSS Class (found on the Advanced Tab) to the Image Module and add the CSS Code to your website.
Hover Zoom In
CSS Class: image-hover-zoom-in
Hover Zoom Out
CSS Class: image-hover-zoom-out
Hover Focus
CSS Class: image-hover-focus
Hover Color
CSS Class: image-hover-color
/* Image Module Hover Effects */
.image-hover-zoom-in,
.image-hover-zoom-out,
.image-hover-focus {
overflow: hidden;
}
.image-hover-zoom-in img {
-webkit-transition: all 3s;
transition: all 3s;
}
.image-hover-zoom-in img:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.image-hover-zoom-out img {
-webkit-transition: all 3s;
transition: all 3s;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.image-hover-zoom-out img:hover {
-webkit-transform: scale(1);
transform: scale(1);
}
.image-hover-focus img {
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: scale(1.01);
transform: scale(1.01);
-webkit-filter: blur(5px);
filter: blur(5px);
}
.image-hover-focus img:hover {
-webkit-filter: blur(0);
filter: blur(0);
}
.image-hover-color img {
-webkit-transition: all 1.0s;
transition: all 1.0s;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.image-hover-color img:hover {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-filter: none;
filter: none;
}
Summary
Let me know how these work for you.
This works great! Unless the image is linked…
Kelly, these work for me even when they are linked. If you are having problems, please provide a link so I can see and help troubleshoot. If you’d prefer not to share the link publicly, then drop me an email (see icon in the header).
Awesome effects! Image Hover Color effect works a treat and so simple! Thanks Tom.
You are welcome, Amy!
That’s a great tutorial. Is it possible to get the image Title to show upon hover too?
Matt, Thanks.
If you add a Title to the module’s Image Title Text field, it will appear on hover. That’s a standard Divi feature.