Imagehover.css - An Image Hover CSS Library

Developer
LittleSnippets.net
Size
5,480 Kb
Views
32,384
  1. Imagehover.css - An Image Hover CSS Library Previews
  2. Imagehover.css - An Image Hover CSS Library HTML Codes
  3. Imagehover.css - An Image Hover CSS Library CSS Codes

How do I make an imagehover.css - an image hover css library?

A Scaleable & Light Image Hover CSS LibraryImagehover.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.. What is a imagehover.css - an image hover css library? How do you make a imagehover.css - an image hover css library? This script and codes were developed by LittleSnippets.net on 03 September 2022, Saturday.

Imagehover.css - An Image Hover CSS Library Previews
IQ Test

Imagehover.css - An Image Hover CSS Library - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Imagehover.css - An Image Hover CSS Library</title> <link rel='stylesheet prefetch' href='https://imagehover.io/css/demo-page.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <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>
</body>
</html>

Imagehover.css - An Image Hover CSS Library - Script Codes CSS Codes

/* * 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;
}
Imagehover.css - An Image Hover CSS Library - Script Codes
Imagehover.css - An Image Hover CSS Library - Script Codes
Home Page Home
Developer LittleSnippets.net
Username littlesnippets
Uploaded September 03, 2022
Rating 4.5
Size 5,480 Kb
Views 32,384
Do you need developer help for Imagehover.css - An Image Hover CSS Library?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

LittleSnippets.net (littlesnippets) Script Codes
Name
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!