[45+] Pure CSS Image Hover Effect Library | imagehover.css

Image hover css is a CSS library that provides over 45 impressive animation effects on images when you hover over them.

How to make use of it:

To get began, you first must download and include the imagehover.css within the head part of the HTML web page.

<link rel="stylesheet" href="css/imagehover.min.css">

Insert photographs with hover content utilizing figure and figcaption tags.

<figure class="imghvr-fade">
  <img src="1.jpg">
  <figcaption>
    <!-- Hover Content Here -->
  </figcaption>
</figure>

When you hover over the picture, it should show the hover content with a fade impact. Available hover results (CSS classes):

1. imghvr-fade
2. imghvr-push-up
3. imghvr-push-down
4. imghvr-push-left
5. imghvr-push-right
6. imghvr-slide-up
7. imghvr-slide-down
8. imghvr-slide-left
9. imghvr-slide-right
10. imghvr-reveal-up
11. imghvr-reveal-down
12. imghvr-reveal-left
13. imghvr-reveal-right
14. imghvr-hinge-up
15. imghvr-hinge-down
16. imghvr-hinge-left
17. imghvr-hinge-right
18. imghvr-flip-horiz
19. imghvr-flip-vert
20. imghvr-flip-diag-1
21. imghvr-flip-diag-2
22. imghvr-shutter-out-horiz
23. imghvr-shutter-out-vert
24. imghvr-shutter-out-diag-1
25. imghvr-shutter-out-diag-2
26. imghvr-shutter-in-horiz
27. imghvr-shutter-in-vert
28. imghvr-shutter-in-out-horiz
29. imghvr-shutter-in-out-vert
30. imghvr-shutter-in-out-diag-1
31. imghvr-shutter-in-out-diag-2
32. imghvr-switch-up
33. imghvr-switch-down
34. imghvr-switch-left
35. imghvr-switch-right
36. imghvr-fold-up
37. imghvr-fold-down
38. imghvr-fold-left
39. imghvr-fold-right
40. imghvr-zoom-in
41. imghvr-zoom-out
42. imghvr-zoom-out-up
43. imghvr-zoom-out-down
44. imghvr-zoom-out-left
45. imghvr-zoom-out-right
46. imghvr-zoom-out-flip-horiz
47. imghvr-zoom-out-flip-vert
48. imghvr-blur

Image Hover Effect With Pure CSS, imagehover.css Plugin/Github

See Demo And Download