Author: | ciar4n |
---|---|
Views Total: | 1,607 views |
Official Page: | Go to website |
Last Update: | March 12, 2021 |
License: | MIT |
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):
- imghvr-fade
- imghvr-push-up
- imghvr-push-down
- imghvr-push-left
- imghvr-push-right
- imghvr-slide-up
- imghvr-slide-down
- imghvr-slide-left
- imghvr-slide-right
- imghvr-reveal-up
- imghvr-reveal-down
- imghvr-reveal-left
- imghvr-reveal-right
- imghvr-hinge-up
- imghvr-hinge-down
- imghvr-hinge-left
- imghvr-hinge-right
- imghvr-flip-horiz
- imghvr-flip-vert
- imghvr-flip-diag-1
- imghvr-flip-diag-2
- imghvr-shutter-out-horiz
- imghvr-shutter-out-vert
- imghvr-shutter-out-diag-1
- imghvr-shutter-out-diag-2
- imghvr-shutter-in-horiz
- imghvr-shutter-in-vert
- imghvr-shutter-in-out-horiz
- imghvr-shutter-in-out-vert
- imghvr-shutter-in-out-diag-1
- imghvr-shutter-in-out-diag-2
- imghvr-switch-up
- imghvr-switch-down
- imghvr-switch-left
- imghvr-switch-right
- imghvr-fold-up
- imghvr-fold-down
- imghvr-fold-left
- imghvr-fold-right
- imghvr-zoom-in
- imghvr-zoom-out
- imghvr-zoom-out-up
- imghvr-zoom-out-down
- imghvr-zoom-out-left
- imghvr-zoom-out-right
- imghvr-zoom-out-flip-horiz
- imghvr-zoom-out-flip-vert
- imghvr-blur
- imghvr-pivot-in
- imghvr-pivot-in-top-left
- imghvr-pivot-in-top-right
- imghvr-pivot-in-bottom-left
- imghvr-pivot-in-bottom-right
- imghvr-pivot-out
- imghvr-pivot-out-top-left
- imghvr-pivot-out-top-right
- imghvr-pivot-out-bottom-left
- imghvr-pivot-out-bottom-right
- imghvr-fall-away-horiz
- imghvr-fall-away-vert
- imghvr-fall-away-cc
- 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
Doesn’t work in Firefox for me (but does in Chrome).
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.
Fixed! Thank you for your feedback.