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

Example of image with Zoom In Hover Effect
CSS Class: image-hover-zoom-in

Hover Zoom Out

Example of image with Zoom Out hover effect
CSS Class: image-hover-zoom-out

Hover Focus

Example of image with Blur-Focus hover effect
CSS Class: image-hover-focus

Hover Color

Example of image with Black&White to Color hover effect
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.

Join our email list

Join our email list

Join our mailing list to receive the latest tech tips from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This