Fork me on GitHub

imagehover.css v1.1

A Scaleable & Light Image Hover CSS Library

Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable image hover effects. Choose from over 40 hover effect classes from a CSS library weighing in at a minified size of only 19KB.

Download

Version 1.1 - Github


The Mark-Up

Once you have included the imagehover.css. Place the following markup in to your HTML document. 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 below this has been set to 'imghvr-fade'. A full list of hover effects and their classes can be found below.

<figure class="imghvr-fade">
    <img src="#">
    <figcaption>
        // Hover Content
    </figcaption>
    <a href="#"></a>
</figure>

Further information on usage can be found here - https://github.com/ciar4n/imagehover.css


The Classes

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

example-image

Hello World

Life is too important to be taken seriously!

License

Imagehover.css is open source, and made available under the MIT License. Distribute, use as-is, or modify to your liking in personal and commercial projects. Please retain the original readme and license files.