cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="main">
  <h1>imagehover.css <a href="#" title="View release history" class="sup">v1.0</a></h1>
  <div class="intro">
    <h2>A Scaleable & Lightweight Image Hover CSS Library</h2>
    <p>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 <b>19KB</b>. Each effect uses the same
      basic markup allowing you to change effect by simply editing the containing class.</p>
  </div>
  <div class="download"><a href="https://imagehover.io/" class="download-btn" target="_blank">Info & Download</a>
    <p class="version">Version 1.0 - <a href="https://github.com/ciar4n/imagehover.css">Github</a></p>
  </div>
  <hr>
  <div class="effects">
    <div class="demo">
      <figure class="imghvr-fade"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-fade</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-push-up"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-push-up</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-push-down"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-push-down</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-push-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-push-left</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-push-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-push-right</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-slide-up"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-slide-up</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-slide-down"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-slide-down</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-slide-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-slide-left</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-slide-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-slide-right</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-reveal-up"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-reveal-up</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-reveal-down"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-reveal-down</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-reveal-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-reveal-left</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-reveal-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-reveal-right</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-hinge-up"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-hinge-up</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-hinge-down"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-hinge-down</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-hinge-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-hinge-left</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-hinge-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-hinge-right</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-flip-horiz"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-flip-horiz</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-flip-vert"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-flip-vert</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-flip-diag-1"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-flip-diag-1</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-flip-diag-2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-flip-diag-2</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-shutter-out-horiz"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-shutter-out-horiz</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-shutter-out-vert"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-shutter-out-vert</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-shutter-out-diag-1"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-shutter-out-diag-1</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-shutter-out-diag-2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-shutter-out-diag-2</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-shutter-in-horiz"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-shutter-in-horiz</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-shutter-in-vert"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-shutter-in-vert</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-shutter-in-out-horiz"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-shutter-in-out-horiz</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-shutter-in-out-vert"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-shutter-in-out-vert</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-shutter-in-out-diag-1"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-shutter-in-out-diag-1</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-shutter-in-out-diag-2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-shutter-in-out-diag-2</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-fold-up"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-fold-up</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-fold-down"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-fold-down</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-fold-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-fold-left</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-fold-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-fold-right</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-zoom-in"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-zoom-in</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-zoom-out"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-zoom-out</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-zoom-out-up"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-zoom-out-up</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-zoom-out-down"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-zoom-out-down</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-zoom-out-left"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-zoom-out-left</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-zoom-out-right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-zoom-out-right</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-zoom-out-flip-horiz"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-zoom-out-flip-horiz</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-zoom-out-flip-vert"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-zoom-out-flip-vert</textarea>
    </div>
    <div class="demo">
      <figure class="imghvr-blur"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/example-image.jpg" alt="example-image">
        <figcaption>
          <h3>Hello World</h3>
          <p>Life is too important to be taken seriously!</p>
        </figcaption>
        <a href="javascript:;"></a>
      </figure>
      <textarea onclick="this.focus();this.select()" readonly="readonly">imghvr-blur</textarea>
    </div>
  </div>
  <div class="license">
    <h3>License</h3>
    <p>Imagehover.css is open source, and made available under the <a href="https://www.opensource.org/licenses/mit-license.php">MIT License</a>. Distribute, use as-is, or modify to your liking in personal and commercial projects. Please retain the original
      readme and license files.</p><br><br><br>
  </div>
</div>
            
          
!
            
              /*
 * ImageHover.css - https://www.imagehover.io
 * Version 1.0
 * Author: Ciarán Walsh

 * Made available under a MIT License:
 * https://www.opensource.org/licenses/mit-license.php

 */
[class^='imghvr-'],
[class*=' imghvr-'] {
  position: relative;
  display: inline-block;
  margin: 0px;
  max-width: 100%;
  background-color: rgba(1, 87, 155, 0.75);
  color: #fff;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
[class^='imghvr-'] > img,
[class*=' imghvr-'] > img {
  vertical-align: top;
  max-width: 100%;
}
[class^='imghvr-'] figcaption,
[class*=' imghvr-'] figcaption {
  background-color: inherit;
  padding: 30px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
[class^='imghvr-'] h3,
[class*=' imghvr-'] h3,
[class^='imghvr-'] p,
[class*=' imghvr-'] p {
  margin: 0;
  padding: 0;
  color: #fff;
}
[class^='imghvr-'] a,
[class*=' imghvr-'] a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
[class^='imghvr-'],
[class*=' imghvr-'],
[class^='imghvr-']:before,
[class^='imghvr-']:after,
[class*=' imghvr-']:before,
[class*=' imghvr-']:after,
[class^='imghvr-'] *,
[class*=' imghvr-'] *,
[class^='imghvr-'] *:before,
[class^='imghvr-'] *:after,
[class*=' imghvr-'] *:before,
[class*=' imghvr-'] *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
/* imghvr-fade
   ----------------------------- */
.imghvr-fade figcaption {
  opacity: 0;
}
.imghvr-fade:hover > img {
  opacity: 0;
}
.imghvr-fade:hover figcaption {
  opacity: 1;
}
/* imghvr-push-*
   ----------------------------- */
[class^='imghvr-push-']:hover figcaption,
[class*=' imghvr-push-']:hover figcaption {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
/* imghvr-push-up
   ----------------------------- */
.imghvr-push-up figcaption {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
.imghvr-push-up:hover > img {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
/* imghvr-push-down
   ----------------------------- */
.imghvr-push-down figcaption {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
.imghvr-push-down:hover > img {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
/* imghvr-push-left
   ----------------------------- */
.imghvr-push-left figcaption {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
.imghvr-push-left:hover > img {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
/* imghvr-push--right
   ----------------------------- */
.imghvr-push-right figcaption {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
.imghvr-push-right:hover > img {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
/* imghvr-slide-*
   ----------------------------- */
[class^='imghvr-slide-']:hover figcaption,
[class*=' imghvr-slide-']:hover figcaption {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
/* imghvr-slide-up
   ----------------------------- */
.imghvr-slide-up figcaption {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  background-color: inherit;
}
/* imghvr-slide-down
   ----------------------------- */
.imghvr-slide-down figcaption {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  background-color: inherit;
}
/* imghvr-slide-left
   ----------------------------- */
.imghvr-slide-left figcaption {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  background-color: inherit;
}
/* imghvr-slide-right
   ----------------------------- */
.imghvr-slide-right figcaption {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
/* imghvr-reveal-*
   ----------------------------- */
[class^='imghvr-reveal-']:before,
[class*=' imghvr-reveal-']:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  background-color: inherit;
}
[class^='imghvr-reveal-'] figcaption,
[class*=' imghvr-reveal-'] figcaption {
  opacity: 0;
}
[class^='imghvr-reveal-']:hover:before,
[class*=' imghvr-reveal-']:hover:before {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
[class^='imghvr-reveal-']:hover figcaption,
[class*=' imghvr-reveal-']:hover figcaption {
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
/* imghvr-reveal-up
   ----------------------------- */
.imghvr-reveal-up:before {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
/* imghvr-reveal-down
   ----------------------------- */
.imghvr-reveal-down:before {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
/* imghvr-reveal-left
   ----------------------------- */
.imghvr-reveal-left:before {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
/* imghvr-reveal-right
   ----------------------------- */
.imghvr-reveal-right:before {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
/* imghvr-hinge-*
   ----------------------------- */
[class^='imghvr-hinge-'],
[class*=' imghvr-hinge-'] {
  -webkit-perspective: 50em;
  perspective: 50em;
}
[class^='imghvr-hinge-'] figcaption,
[class*=' imghvr-hinge-'] figcaption {
  opacity: 0;
  z-index: 1;
}
[class^='imghvr-hinge-']:hover img,
[class*=' imghvr-hinge-']:hover img {
  opacity: 0;
}
[class^='imghvr-hinge-']:hover figcaption,
[class*=' imghvr-hinge-']:hover figcaption {
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
/* imghvr-hinge-up
   ----------------------------- */
.imghvr-hinge-up img {
  -webkit-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}
.imghvr-hinge-up figcaption {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
.imghvr-hinge-up:hover > img {
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}
.imghvr-hinge-up:hover figcaption {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
/* imghvr-hinge-down
   ----------------------------- */
.imghvr-hinge-down img {
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
.imghvr-hinge-down figcaption {
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% -50%;
  -ms-transform-origin: 50% -50%;
  transform-origin: 50% -50%;
}
.imghvr-hinge-down:hover > img {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  opacity: 0;
}
.imghvr-hinge-down:hover figcaption {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
/* imghvr-hinge-left
   ----------------------------- */
.imghvr-hinge-left img {
  -webkit-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}
.imghvr-hinge-left figcaption {
  -webkit-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
  -webkit-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}
.imghvr-hinge-left:hover > img {
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
}
.imghvr-hinge-left:hover figcaption {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
/* imghvr-hinge-right
   ----------------------------- */
.imghvr-hinge-right img {
  -webkit-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}
.imghvr-hinge-right figcaption {
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -webkit-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  transform-origin: 0 50%;
}
.imghvr-hinge-right:hover > img {
  -webkit-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
}
.imghvr-hinge-right:hover figcaption {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
/* imghvr-flip-*
   ----------------------------- */
[class^='imghvr-flip-'],
[class*=' imghvr-flip-'] {
  -webkit-perspective: 50em;
  perspective: 50em;
}
[class^='imghvr-flip-'] img,
[class*=' imghvr-flip-'] img {
  backface-visibility: hidden;
}
[class^='imghvr-flip-'] figcaption,
[class*=' imghvr-flip-'] figcaption {
  opacity: 0;
}
[class^='imghvr-flip-']:hover > img,
[class*=' imghvr-flip-']:hover > img {
  opacity: 0;
}
[class^='imghvr-flip-']:hover figcaption,
[class*=' imghvr-flip-']:hover figcaption {
  opacity: 1;
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
/* imghvr-flip-horiz
   ----------------------------- */
.imghvr-flip-horiz figcaption {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}
.imghvr-flip-horiz:hover img {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}
.imghvr-flip-horiz:hover figcaption {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
/* imghvr-flip-vert
   ----------------------------- */
.imghvr-flip-vert figcaption {
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -webkit-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}
.imghvr-flip-vert:hover > img {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
.imghvr-flip-vert:hover figcaption {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
/* imghvr-flip-diag-1
   ----------------------------- */
.imghvr-flip-diag-1 figcaption {
  -webkit-transform: rotate3d(1, -1, 0, 100deg);
  transform: rotate3d(1, -1, 0, 100deg);
}
.imghvr-flip-diag-1:hover > img {
  -webkit-transform: rotate3d(-1, 1, 0, 100deg);
  transform: rotate3d(-1, 1, 0, 100deg);
}
.imghvr-flip-diag-1:hover figcaption {
  -webkit-transform: rotate3d(0, 0, 0, 0deg);
  transform: rotate3d(0, 0, 0, 0deg);
}
/* imghvr-flip-diag-2
   ----------------------------- */
.imghvr-flip-diag-2 figcaption {
  -webkit-transform: rotate3d(1, 1, 0, 100deg);
  transform: rotate3d(1, 1, 0, 100deg);
}
.imghvr-flip-diag-2:hover > img {
  -webkit-transform: rotate3d(-1, -1, 0, 100deg);
  transform: rotate3d(-1, -1, 0, 100deg);
}
.imghvr-flip-diag-2:hover figcaption {
  -webkit-transform: rotate3d(0, 0, 0, 0deg);
  transform: rotate3d(0, 0, 0, 0deg);
}
/* imghvr-shutter-out-*
   ----------------------------- */
[class^='imghvr-shutter-out-']:before,
[class*=' imghvr-shutter-out-']:before {
  background: inherit;
  position: absolute;
  content: '';
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
[class^='imghvr-shutter-out-'] figcaption,
[class*=' imghvr-shutter-out-'] figcaption {
  opacity: 0;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
[class^='imghvr-shutter-out-']:hover:before,
[class*=' imghvr-shutter-out-']:hover:before {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
[class^='imghvr-shutter-out-']:hover figcaption,
[class*=' imghvr-shutter-out-']:hover figcaption {
  opacity: 1;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
/* imghvr-shutter-out-horiz
   ----------------------------- */
.imghvr-shutter-out-horiz:before {
  left: 50%;
  right: 50%;
  top: 0;
  bottom: 0;
}
.imghvr-shutter-out-horiz:hover:before {
  left: 0;
  right: 0;
}
/* imghvr-shutter-out-vert
   ----------------------------- */
.imghvr-shutter-out-vert:before {
  top: 50%;
  bottom: 50%;
  left: 0;
  right: 0;
}
.imghvr-shutter-out-vert:hover:before {
  top: 0;
  bottom: 0;
}
/* imghvr-shutter-out-diag-1
   ----------------------------- */
.imghvr-shutter-out-diag-1:before {
  top: 50%;
  bottom: 50%;
  left: -35%;
  right: -35%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.imghvr-shutter-out-diag-1:hover:before {
  top: -35%;
  bottom: -35%;
}
/* imghvr-shutter-out-diag-2
   ----------------------------- */
.imghvr-shutter-out-diag-2:before {
  top: 50%;
  bottom: 50%;
  left: -35%;
  right: -35%;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.imghvr-shutter-out-diag-2:hover:before {
  top: -35%;
  bottom: -35%;
}
/* imghvr-shutter-in-*
   ----------------------------- */
[class^='imghvr-shutter-in-']:after,
[class*=' imghvr-shutter-in-']:after,
[class^='imghvr-shutter-in-']:before,
[class*=' imghvr-shutter-in-']:before {
  background: inherit;
  position: absolute;
  content: '';
}
[class^='imghvr-shutter-in-']:after,
[class*=' imghvr-shutter-in-']:after {
  top: 0;
  left: 0;
}
[class^='imghvr-shutter-in-']:before,
[class*=' imghvr-shutter-in-']:before {
  right: 0;
  bottom: 0;
}
[class^='imghvr-shutter-in-'] figcaption,
[class*=' imghvr-shutter-in-'] figcaption {
  opacity: 0;
  z-index: 1;
}
[class^='imghvr-shutter-in-']:hover figcaption,
[class*=' imghvr-shutter-in-']:hover figcaption {
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
/* imghvr-shutter-in-horiz
   ----------------------------- */
.imghvr-shutter-in-horiz:after,
.imghvr-shutter-in-horiz:before {
  width: 0;
  height: 100%;
}
.imghvr-shutter-in-horiz:hover:after,
.imghvr-shutter-in-horiz:hover:before {
  width: 50%;
}
/* imghvr-shutter-in-vert
   ----------------------------- */
.imghvr-shutter-in-vert:after,
.imghvr-shutter-in-vert:before {
  height: 0;
  width: 100%;
}
.imghvr-shutter-in-vert:hover:after,
.imghvr-shutter-in-vert:hover:before {
  height: 50%;
}
/* imghvr-shutter-in-out-horiz
   ----------------------------- */
.imghvr-shutter-in-out-horiz:after,
.imghvr-shutter-in-out-horiz:before {
  width: 0;
  height: 100%;
}
.imghvr-shutter-in-out-horiz:hover:after,
.imghvr-shutter-in-out-horiz:hover:before {
  width: 100%;
}
/* imghvr-shutter-in-out-vert
   ----------------------------- */
.imghvr-shutter-in-out-vert:after,
.imghvr-shutter-in-out-vert:before {
  height: 0;
  width: 100%;
}
.imghvr-shutter-in-out-vert:hover:after,
.imghvr-shutter-in-out-vert:hover:before {
  height: 100%;
}
/* imghvr-shutter-in-out-diag-1
   ----------------------------- */
.imghvr-shutter-in-out-diag-1:after,
.imghvr-shutter-in-out-diag-1:before {
  width: 200%;
  height: 200%;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
.imghvr-shutter-in-out-diag-1:after {
  -webkit-transform: skew(-45deg) translateX(-150%);
  transform: skew(-45deg) translateX(-150%);
}
.imghvr-shutter-in-out-diag-1:before {
  -webkit-transform: skew(-45deg) translateX(150%);
  transform: skew(-45deg) translateX(150%);
}
.imghvr-shutter-in-out-diag-1:hover:after {
  -webkit-transform: skew(-45deg) translateX(-50%);
  transform: skew(-45deg) translateX(-50%);
}
.imghvr-shutter-in-out-diag-1:hover:before {
  -webkit-transform: skew(-45deg) translateX(50%);
  transform: skew(-45deg) translateX(50%);
}
/* imghvr-shutter-in-out-diag-2
   ----------------------------- */
.imghvr-shutter-in-out-diag-2:after,
.imghvr-shutter-in-out-diag-2:before {
  width: 200%;
  height: 200%;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
.imghvr-shutter-in-out-diag-2:after {
  -webkit-transform: skew(45deg) translateX(-100%);
  transform: skew(45deg) translateX(-100%);
}
.imghvr-shutter-in-out-diag-2:before {
  -webkit-transform: skew(45deg) translateX(100%);
  transform: skew(45deg) translateX(100%);
}
.imghvr-shutter-in-out-diag-2:hover:after {
  -webkit-transform: skew(45deg) translateX(0%);
  transform: skew(45deg) translateX(0%);
}
.imghvr-shutter-in-out-diag-2:hover:before {
  -webkit-transform: skew(45deg) translateX(0%);
  transform: skew(45deg) translateX(0%);
}
/* imghvr-fold*
   ----------------------------- */
[class^='imghvr-fold'],
[class*=' imghvr-fold'] {
  -webkit-perspective: 50em;
  perspective: 50em;
}
[class^='imghvr-fold'] img,
[class*=' imghvr-fold'] img {
  -webkit-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}
[class^='imghvr-fold'] figcaption,
[class*=' imghvr-fold'] figcaption {
  z-index: 1;
  opacity: 0;
}
[class^='imghvr-fold']:hover > img,
[class*=' imghvr-fold']:hover > img {
  opacity: 0;
  -webkit-transition-delay: 0;
  transition-delay: 0;
}
[class^='imghvr-fold']:hover figcaption,
[class*=' imghvr-fold']:hover figcaption {
  -webkit-transform: rotateX(0deg) translate3d(0, 0%, 0) scale(1);
  transform: rotateX(0deg) translate3d(0, 0%, 0) scale(1);
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
/* imghvr-fold-up
   ----------------------------- */
.imghvr-fold-up > img {
  -webkit-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}
.imghvr-fold-up figcaption {
  -webkit-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6);
  transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6);
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
.imghvr-fold-up:hover > img {
  -webkit-transform: rotateX(90deg) scale(0.6) translateY(50%);
  transform: rotateX(90deg) scale(0.6) translateY(50%);
}
/* imghvr-fold-down
   ----------------------------- */
.imghvr-fold-down > img {
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
.imghvr-fold-down figcaption {
  -webkit-transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6);
  transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6);
  -webkit-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}
.imghvr-fold-down:hover > img {
  -webkit-transform: rotateX(-90deg) scale(0.6) translateY(-50%);
  transform: rotateX(-90deg) scale(0.6) translateY(-50%);
}
/* imghvr-fold-left
   ----------------------------- */
.imghvr-fold-left > img {
  -webkit-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}
.imghvr-fold-left figcaption {
  -webkit-transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6);
  transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6);
  -webkit-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}
.imghvr-fold-left:hover > img {
  -webkit-transform: rotateY(-90deg) scale(0.6) translateX(50%);
  transform: rotateY(-90deg) scale(0.6) translateX(50%);
}
/* imghvr-fold-right
   ----------------------------- */
.imghvr-fold-right {
  -webkit-perspective: 50em;
  perspective: 50em;
}
.imghvr-fold-right > img {
  -webkit-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}
.imghvr-fold-right figcaption {
  -webkit-transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6);
  transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6);
  -webkit-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  transform-origin: 0 50%;
}
.imghvr-fold-right:hover > img {
  -webkit-transform: rotateY(90deg) scale(0.6) translateX(-50%);
  transform: rotateY(90deg) scale(0.6) translateX(-50%);
}
/* imghvr-zoom-in
   ----------------------------- */
.imghvr-zoom-in figcaption {
  opacity: 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}
.imghvr-zoom-in:hover figcaption {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
/* imghvr-zoom-out*
   ----------------------------- */
[class^='imghvr-zoom-out'] figcaption,
[class*=' imghvr-zoom-out'] figcaption {
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  opacity: 0;
}
[class^='imghvr-zoom-out']:hover figcaption,
[class*=' imghvr-zoom-out']:hover figcaption,
[class^='imghvr-zoom-out'].hover figcaption,
[class*=' imghvr-zoom-out'].hover figcaption {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
/* imghvr-zoom-out
   ----------------------------- */
.imghvr-zoom-out:hover > img {
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  opacity: 0;
}
/* imghvr-zoom-out-up
   ----------------------------- */
.imghvr-zoom-out-up:hover > img,
.imghvr-zoom-out-up.hover > img {
  -webkit-animation: imghvr-zoom-out-up 0.4s linear;
  animation: imghvr-zoom-out-up 0.4s linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes imghvr-zoom-out-up {
  50% {
    -webkit-transform: scale(0.8) translateY(0%);
    transform: scale(0.8) translateY(0%);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(0.8) translateY(-150%);
    transform: scale(0.8) translateY(-150%);
    opacity: 0.5;
  }
}
@keyframes imghvr-zoom-out-up {
  50% {
    -webkit-transform: scale(0.8) translateY(0%);
    transform: scale(0.8) translateY(0%);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(0.8) translateY(-150%);
    transform: scale(0.8) translateY(-150%);
    opacity: 0.5;
  }
}
/* imghvr-zoom-out-down
   ----------------------------- */
.imghvr-zoom-out-down:hover > img,
.imghvr-zoom-out-down.hover > img {
  -webkit-animation: imghvr-zoom-out-down 0.4s linear;
  animation: imghvr-zoom-out-down 0.4s linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes imghvr-zoom-out-down {
  50% {
    -webkit-transform: scale(0.8) translateY(0%);
    transform: scale(0.8) translateY(0%);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(0.8) translateY(150%);
    transform: scale(0.8) translateY(150%);
    opacity: 0.5;
  }
}
@keyframes imghvr-zoom-out-down {
  50% {
    -webkit-transform: scale(0.8) translateY(0%);
    transform: scale(0.8) translateY(0%);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(0.8) translateY(150%);
    transform: scale(0.8) translateY(150%);
    opacity: 0.5;
  }
}
/* imghvr-zoom-out-left
   ----------------------------- */
.imghvr-zoom-out-left:hover > img,
.imghvr-zoom-out-left.hover > img {
  -webkit-animation: imghvr-zoom-out-left 0.4s linear;
  animation: imghvr-zoom-out-left 0.4s linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes imghvr-zoom-out-left {
  50% {
    -webkit-transform: scale(0.8) translateX(0%);
    transform: scale(0.8) translateX(0%);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(0.8) translateX(-150%);
    transform: scale(0.8) translateX(-150%);
    opacity: 0.5;
  }
}
@keyframes imghvr-zoom-out-left {
  50% {
    -webkit-transform: scale(0.8) translateX(0%);
    transform: scale(0.8) translateX(0%);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(0.8) translateX(-150%);
    transform: scale(0.8) translateX(-150%);
    opacity: 0.5;
  }
}
/* imghvr-zoom-out-right
   ----------------------------- */
.imghvr-zoom-out-right:hover > img,
.imghvr-zoom-out-right.hover > img {
  -webkit-animation: imghvr-zoom-out-right 0.4s linear;
  animation: imghvr-zoom-out-right 0.4s linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-webkit-keyframes imghvr-zoom-out-right {
  50% {
    -webkit-transform: scale(0.8) translateX(0%);
    transform: scale(0.8) translateX(0%);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(0.8) translateX(150%);
    transform: scale(0.8) translateX(150%);
    opacity: 0.5;
  }
}
@keyframes imghvr-zoom-out-right {
  50% {
    -webkit-transform: scale(0.8) translateX(0%);
    transform: scale(0.8) translateX(0%);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(0.8) translateX(150%);
    transform: scale(0.8) translateX(150%);
    opacity: 0.5;
  }
}
/* imghvr-zoom-out-flip-horiz
   ----------------------------- */
.imghvr-zoom-out-flip-horiz {
  -webkit-perspective: 50em;
  perspective: 50em;
}
.imghvr-zoom-out-flip-horiz figcaption {
  opacity: 0;
  -webkit-transform: rotateX(90deg) translateY(-100%) scale(0.5);
  transform: rotateX(90deg) translateY(-100%) scale(0.5);
}
.imghvr-zoom-out-flip-horiz:hover > img,
.imghvr-zoom-out-flip-horiz.hover > img {
  -webkit-transform: rotateX(-100deg) translateY(50%) scale(0.5);
  transform: rotateX(-100deg) translateY(50%) scale(0.5);
  opacity: 0;
  -webkit-transition-delay: 0;
  transition-delay: 0;
}
.imghvr-zoom-out-flip-horiz:hover figcaption,
.imghvr-zoom-out-flip-horiz.hover figcaption {
  -webkit-transform: rotateX(0deg) translateY(0%) scale(1);
  transform: rotateX(0deg) translateY(0%) scale(1);
  opacity: 1;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
/* imghvr-zoom-out-flip-vert
   ----------------------------- */
.imghvr-zoom-out-flip-vert {
  -webkit-perspective: 50em;
  perspective: 50em;
}
.imghvr-zoom-out-flip-vert figcaption {
  opacity: 0;
  -webkit-transform: rotateY(90deg) translate(50%, 0px) scale(0.5);
  transform: rotateY(90deg) translate(50%, 0px) scale(0.5);
}
.imghvr-zoom-out-flip-vert:hover > img,
.imghvr-zoom-out-flip-vert.hover > img {
  -webkit-transform: rotateY(-100deg) translateX(50%) scale(0.5);
  transform: rotateY(-100deg) translateX(50%) scale(0.5);
  opacity: 0;
  -webkit-transition-delay: 0;
  transition-delay: 0;
}
.imghvr-zoom-out-flip-vert:hover figcaption,
.imghvr-zoom-out-flip-vert.hover figcaption {
  -webkit-transform: rotateY(0deg) translate(0px, 0px) scale(1);
  transform: rotateY(0deg) translate(0px, 0px) scale(1);
  opacity: 1;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
/* imghvr-blur
   ----------------------------- */
.imghvr-blur figcaption {
  opacity: 0;
}
.imghvr-blur:hover > img {
  -webkit-filter: blur(30px);
  filter: blur(30px);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  opacity: 0;
}
.imghvr-blur:hover figcaption {
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

            
          
!
999px
Loading ..................

Console