Fade effects

.img-hov-fadein

...

.img-hov-fadeout

...

You shoudl apply .img-hov-* classes to a wrapper element of <img>. This could be a <div>, <a>, <figure>, etc. based on your need.

<figure class="img-hov-fadein">
  <img src="../assets/img/image.jpg" alt="...">
</figure>

<!-- Clickable -->
<a class="img-hov-fadein" href="#">
  <img src="../assets/img/image.jpg" alt="...">
</a>

Zoom effects

.img-hov-zoomin

...

.img-hov-zoomout

...

.img-hov-stretchin

...

.img-hov-stretchout

...

Slide effects

.img-hov-slideleft

...

.img-hov-slideright

...

.img-hov-slideup

...

.img-hov-slidedown

...

Rotate effects

.img-hov-rotateleft

...

.img-hov-rotateright

...