Image Hover CSS Libraryv1.0

A Scaleable & Light Image Hover CSS Library

A lovingly crafted CSS library allowing you to easily implement scaleable image hover effects. 58 hover effect classes to choose from a CSS library weighing in at a minified size of only 28KB. Each effect uses the same basic markup allowing you to change effect by simply editing the containing class.

Basic Usage

Include the imagehover.css stylesheet on your document’s <head>

<head>
  <link rel="stylesheet" href="imagehover.min.css">
</head>

Place the following markup in to your HTML document

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

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 below!.

Adding a Link

To link your image, add an empty <a> tag just after the figcaption element.

<figure class="imghvr-fade">
  <img src="#">
  <figcaption>
    // Hover Content
  </figcaption>
  <a href="http://www.imagehover.io"></a>
</figure>

Background Color

You can change the background color via some inline CSS added to the figure element like so…

<figure class="imghvr-fade" style="background-color:#D14233;">
  <img src="#">
  <figcaption>
    // Hover Content
  </figcaption>
</figure>

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;
}

Caption Background Color

In most cases you can change the caption background color via some inline CSS added to the figure element like so…

<figure class="imghvr-fade">
  <img src="#">
  <figcaption style="background-color:#D14233;">
    // Hover Content
  </figcaption>
</figure>

Alternatively this can be applied via your CSS files. The following example will effect all elements with a imagehover.css class applied.

*[class^='imghvr-'] figcaption,
*[class*=' imghvr-'] figcaption {
  background-color: #D14233;
}

Browser Support

Imagehover.css relies heavely on some CSS3 features inlcuding pseudo-elements, animations, transitions and transforms. Some older browsers will have limited support of these features.

Image Hover CSS LIbrary (Animations and Effects)