Pure CSS3 Image Hover Animation Library imagehover.css
Add-ons
Plugin description: imagehover.css - A pure CSS3 image hover animation library featuring 44 mouse hover effects.
Usage
To use it, include the imagehover.css or imagehover.min.css file in your page.
1 | <link type="text/css" rel="stylesheet" href="css/imagehover.min.css" /> |
HTML Structure
Use the following HTML structure on your page. Set the image src to the image you need. Hover Content is the content displayed when the mouse hovers over the image and can be customized. In the <figure> element, set the class attribute to the class corresponding to your desired image hover effect.
1 2 3 4 5 6 7 | <figure class="imghvr-fade"> <img src="#"> <figcaption> // Hover Content </figcaption> <a href="#"></a></figure> |
The available image hover effect classes in imagehover.css include:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | imghvr-fadeimghvr-push-upimghvr-push-downimghvr-push-leftimghvr-push-rightimghvr-slide-upimghvr-slide-downimghvr-slide-leftimghvr-slide-rightimghvr-reveal-upimghvr-reveal-downimghvr-reveal-leftimghvr-reveal-rightimghvr-hinge-upimghvr-hinge-downimghvr-hinge-leftimghvr-hinge-rightimghvr-flip-horizimghvr-flip-vertimghvr-flip-diag-1imghvr-flip-diag-2imghvr-shutter-out-horizimghvr-shutter-out-vertimghvr-shutter-out-diag-1imghvr-shutter-out-diag-2imghvr-shutter-in-horizimghvr-shutter-in-vertimghvr-shutter-in-out-horizimghvr-shutter-in-out-vertimghvr-shutter-in-out-diag-1imghvr-shutter-in-out-diag-2imghvr-fold-upimghvr-fold-downimghvr-fold-leftimghvr-fold-rightimghvr-zoom-inimghvr-zoom-outimghvr-zoom-out-upimghvr-zoom-out-downimghvr-zoom-out-leftimghvr-zoom-out-rightimghvr-zoom-out-flip-horizimghvr-zoom-out-flip-vertimghvr-blur |
评论