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

image-hover-effect-css

Imagehover.css is a well-crafted CSS library that allows you to easily implement scaleable image scrolling effects. Choose from over 45+ scroll effect categories from a CSS library that weighs as little as 19 KB.

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

Official Website(ciar4n): Click Here

This superior jQuery/javascript plugin is developed by ciar4n. For extra Advanced usage, please go to the official website.