Fade effects
.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>
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