Fade effects
.img-hov-fadein
![...](../assets/img/gallery/thumb-sm/1.jpg)
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
![...](../assets/img/gallery/thumb-sm/1.jpg)
.img-hov-zoomout
![...](../assets/img/gallery/thumb-sm/1.jpg)
.img-hov-stretchin
![...](../assets/img/gallery/thumb-sm/1.jpg)
.img-hov-stretchout
![...](../assets/img/gallery/thumb-sm/1.jpg)
Slide effects
.img-hov-slideleft
![...](../assets/img/gallery/thumb-sm/1.jpg)
.img-hov-slideright
![...](../assets/img/gallery/thumb-sm/1.jpg)
.img-hov-slideup
![...](../assets/img/gallery/thumb-sm/1.jpg)
.img-hov-slidedown
![...](../assets/img/gallery/thumb-sm/1.jpg)
Rotate effects
.img-hov-rotateleft
![...](../assets/img/gallery/thumb-sm/1.jpg)
.img-hov-rotateright
![...](../assets/img/gallery/thumb-sm/1.jpg)