40+ Image Hover Effect With Pure CSS – imagehover.css

Category: Animation , CSS & CSS3 , Recommended | December 2, 2018
Author: ciar4n
Views Total: 4,474
Official Page: Go to website
Last Update: December 2, 2018
License: MIT

Preview:

40+ Image Hover Effect With Pure CSS – imagehover.css

Description:

imagehover.css is a CSS library that provides 40+ animated fancy animation effects on images when hovering.

How to use it:

To get started, you first need to download and include the imagehover.css in the head section of the html page.

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

Insert images with hover content using figure and figcaption tags.

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

That’s it. When you hover over the image, it will display the hover content with a fade effect. Available hover effects (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-fold-up
  33. imghvr-fold-down
  34. imghvr-fold-left
  35. imghvr-fold-right
  36. imghvr-zoom-in
  37. imghvr-zoom-out
  38. imghvr-zoom-out-up
  39. imghvr-zoom-out-down
  40. imghvr-zoom-out-left
  41. imghvr-zoom-out-right
  42. imghvr-zoom-out-flip-horiz
  43. imghvr-zoom-out-flip-vert
  44. imghvr-blur

Changelog:

12/02/2018

  • Update

08/14/2018

  • Bugfix

You Might Be Interested In:

Leave a Reply