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

Preview:

Description:

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

See Also:

• A Collection Of Cool Button Hover Effects – btns.css
• SCSS Mixin Library For Cool Link Hover Effects
• Creating Hover Effects with CSS3 Animations – hover.css

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