Fadeeffects
.img-hov-fadein

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>
Zoomeffects
.img-hov-zoomin

.img-hov-zoomout

.img-hov-stretchin

.img-hov-stretchout

Slideeffects
.img-hov-slideleft

.img-hov-slideright

.img-hov-slideup

.img-hov-slidedown

Rotateeffects
.img-hov-rotateleft

.img-hov-rotateright
