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 Out

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.