This library provides 44 free CSS effects with a small file size (19KB), including effects like top, right, left, zoom in, zoom out, flip, etc. Additionally, you can still purchase a license to use 216 effects.
* Download: http://www.imagehover.io/
Basic Usage
1. Include the stylesheet on your document's `<head>`
2. Place the following markup in to your HTML document
3. Edit the URL to your image and add your hover content. Then simply set the imagehover.css class of your choice to the containing figure element. In the example above this has been set to 'imghvr-fade'. A full list of hover effects and their classes can be found [here!](http://www.imagehover.io/).
Adding a Link
To link your image, add an empty <a> tag just after the figcaption element of your markup. Set the href attribute to the URL you wish to link your image to.
Background Color
All background colors are inherited from the containing <figure> element. You can change the background color via some inline CSS added to the figure element like so...
Alternatively this can be applied via your CSS files. The following example will effect all elements with a imagehover.css class applied.
[class^='imghvr-'],
[class*=' imghvr-'] {
background-color: #D14233;
}
