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

Category: Animation , CSS & CSS3 , Recommended | March 12, 2021
Author:ciar4n
Views Total:1,607 views
Official Page:Go to website
Last Update:March 12, 2021
License:MIT

Preview:

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

Description:

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

See Also:

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-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
  49. imghvr-pivot-in
  50. imghvr-pivot-in-top-left
  51. imghvr-pivot-in-top-right
  52. imghvr-pivot-in-bottom-left
  53. imghvr-pivot-in-bottom-right
  54. imghvr-pivot-out
  55. imghvr-pivot-out-top-left
  56. imghvr-pivot-out-top-right
  57. imghvr-pivot-out-bottom-left
  58. imghvr-pivot-out-bottom-right
  59. imghvr-fall-away-horiz
  60. imghvr-fall-away-vert
  61. imghvr-fall-away-cc
  62. imghvr-fall-away-ccc

Changelog:

03/12/2021

  • Add fall-away hover effects

02/27/2021

  • Add pivot hover effects

02/18/2021

  • Add switch hover effects

07/04/2019

  • v2.0.0

12/02/2018

  • Update

08/14/2018

  • Bugfix

You Might Be Interested In:


3 thoughts on “60+ Image Hover Effect With Pure CSS – imagehover.css

  1. Norman

    The Demo Link needs to be fixed. It is not pointing to a demo, but merely reloads the same page. Please can you fix it? Would Love to Demo this.

    Reply

Leave a Reply