<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> </div> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-3"> <figure class="imghvr-fade"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <p>What is Lorem Ipsum?</p> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-push-up"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-push-down"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-push-left"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <p>What is Lorem Ipsum?</p> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-push-right"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-slide-up"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-slide-down"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <p>What is Lorem Ipsum?</p> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-slide-left"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-slide-right"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-reveal-up"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <p>What is Lorem Ipsum?</p> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-reveal-down"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-reveal-left"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-reveal-right"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <p>What is Lorem Ipsum?</p> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-hinge-up"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-hinge-down"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-hinge-left"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <p>What is Lorem Ipsum?</p> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-hinge-right"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-flip-horiz"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-flip-vert"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <p>What is Lorem Ipsum?</p> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-flip-diag-1"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-flip-diag-2"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-shutter-out-horiz"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <p>What is Lorem Ipsum?</p> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-shutter-out-vert"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-shutter-out-diag-1"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-shutter-out-diag-2"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <p>What is Lorem Ipsum?</p> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-shutter-in-horiz"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-shutter-in-vert"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-shutter-in-out-horiz"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <p>What is Lorem Ipsum?</p> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-shutter-in-out-vert"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-shutter-in-out-diag-1"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-shutter-in-out-diag-2"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <p>What is Lorem Ipsum?</p> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-fold-up"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-fold-down"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-fold-left"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <p>What is Lorem Ipsum?</p> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-fold-right"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-zoom-in"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-zoom-out"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <p>What is Lorem Ipsum?</p> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-zoom-out-up"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-zoom-out-down"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-zoom-out-left"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <p>What is Lorem Ipsum?</p> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-zoom-out-right"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-zoom-out-flip-horiz"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-zoom-out-flip-vert"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <p>What is Lorem Ipsum?</p> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> <div class="col-md-3"> <figure class="imghvr-blur"> <img src="https://placeimg.com/300/300/people" class="img-responsive"> <figcaption> <h1>Hello world</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Apple</button> <button type="button" class="btn btn-default">Samsung</button> </div> </figcaption> </figure> </div> </div> </div>

.col-md-3{ margin-bottom:20px; margin-top:20px; height: 200px; overflow: hidden; } @charset "UTF-8"; /*! * ImageHover.css - http://www.imagehover.io * Version 1.0 * Author: Ciarán Walsh * Made available under a MIT License: * http://www.opensource.org/licenses/mit-license.php */ [class^='imghvr-'], [class*=' imghvr-'] { position: relative; display: inline-block; margin: 0; max-width: 100%; background-color: #2266a5; color: #fff; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-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: #135796; padding: 30px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: #ffffff; } [class^='imghvr-'] figcaption h1, [class^='imghvr-'] figcaption h2, [class^='imghvr-'] figcaption h3, [class^='imghvr-'] figcaption h4, [class^='imghvr-'] figcaption h5, [class^='imghvr-'] figcaption h6, [class*=' imghvr-'] figcaption h1, [class*=' imghvr-'] figcaption h2, [class*=' imghvr-'] figcaption h3, [class*=' imghvr-'] figcaption h4, [class*=' imghvr-'] figcaption h5, [class*=' imghvr-'] figcaption h6 { color: #ffffff; } [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 { box-sizing: border-box; -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; transition: all 0.35s ease; } /* imghvr-fade-* ----------------------------- */ [class^='imghvr-fade'] figcaption, [class*=' imghvr-fade'] figcaption { opacity: 0; } [class^='imghvr-fade']:hover > img, [class*=' imghvr-fade']:hover > img { opacity: 0; } [class^='imghvr-fade']:hover figcaption, [class*=' imghvr-fade']:hover figcaption { opacity: 1; } [class^='imghvr-fade']:hover > img, [class^='imghvr-fade']:hover figcaption, [class*=' imghvr-fade']:hover > img, [class*=' imghvr-fade']:hover figcaption { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } /* imghvr-fade ----------------------------- */ /* imghvr-fade-in-up ----------------------------- */ .imghvr-fade-in-up figcaption { -webkit-transform: translate(0, 15%); -moz-transform: translate(0, 15%); -ms-transform: translate(0, 15%); -o-transform: translate(0, 15%); transform: translate(0, 15%); } /* imghvr-fade-in-down ----------------------------- */ .imghvr-fade-in-down figcaption { -webkit-transform: translate(0, -15%); -moz-transform: translate(0, -15%); -ms-transform: translate(0, -15%); -o-transform: translate(0, -15%); transform: translate(0, -15%); } /* imghvr-fade-in-left ----------------------------- */ .imghvr-fade-in-left figcaption { -webkit-transform: translate(-15%, 0); -moz-transform: translate(-15%, 0); -ms-transform: translate(-15%, 0); -o-transform: translate(-15%, 0); transform: translate(-15%, 0); } /* imghvr-fade-in-right ----------------------------- */ .imghvr-fade-in-right figcaption { -webkit-transform: translate(15%, 0); -moz-transform: translate(15%, 0); -ms-transform: translate(15%, 0); -o-transform: translate(15%, 0); transform: translate(15%, 0); } /* imghvr-push-* ----------------------------- */ [class^='imghvr-push-']:hover figcaption, [class*=' imghvr-push-']:hover figcaption { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } /* imghvr-push-up ----------------------------- */ .imghvr-push-up figcaption { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } .imghvr-push-up:hover > img { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } /* imghvr-push-down ----------------------------- */ .imghvr-push-down figcaption { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .imghvr-push-down:hover > img { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } /* imghvr-push-left ----------------------------- */ .imghvr-push-left figcaption { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .imghvr-push-left:hover > img { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } /* imghvr-push--right ----------------------------- */ .imghvr-push-right figcaption { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .imghvr-push-right:hover > img { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } /* imghvr-slide-* ----------------------------- */ [class^='imghvr-slide-']:hover figcaption, [class*=' imghvr-slide-']:hover figcaption { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } /* imghvr-slide-up ----------------------------- */ .imghvr-slide-up figcaption { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } /* imghvr-slide-down ----------------------------- */ .imghvr-slide-down figcaption { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } /* imghvr-slide-left ----------------------------- */ .imghvr-slide-left figcaption { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } /* imghvr-slide-right ----------------------------- */ .imghvr-slide-right figcaption { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } /* imghvr-slide-top-left ----------------------------- */ .imghvr-slide-top-left figcaption { -webkit-transform: translate(-100%, -100%); -moz-transform: translate(-100%, -100%); -ms-transform: translate(-100%, -100%); -o-transform: translate(-100%, -100%); transform: translate(-100%, -100%); } /* imghvr-slide-top-right ----------------------------- */ .imghvr-slide-top-right figcaption { -webkit-transform: translate(100%, -100%); -moz-transform: translate(100%, -100%); -ms-transform: translate(100%, -100%); -o-transform: translate(100%, -100%); transform: translate(100%, -100%); } /* imghvr-slide-bottom-left ----------------------------- */ .imghvr-slide-bottom-left figcaption { -webkit-transform: translate(-100%, 100%); -moz-transform: translate(-100%, 100%); -ms-transform: translate(-100%, 100%); -o-transform: translate(-100%, 100%); transform: translate(-100%, 100%); } /* imghvr-slide-bottom-right ----------------------------- */ .imghvr-slide-bottom-right figcaption { -webkit-transform: translate(100%, 100%); -moz-transform: translate(100%, 100%); -ms-transform: translate(100%, 100%); -o-transform: translate(100%, 100%); transform: translate(100%, 100%); } /* imghvr-reveal-* ----------------------------- */ [class^='imghvr-reveal-']:before, [class*=' imghvr-reveal-']:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; background-color: #135796; } [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); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } [class^='imghvr-reveal-']:hover figcaption, [class*=' imghvr-reveal-']:hover figcaption { opacity: 1; -webkit-transition-delay: 0.21s; -moz-transition-delay: 0.21s; transition-delay: 0.21s; } /* imghvr-reveal-up ----------------------------- */ .imghvr-reveal-up:before { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } /* imghvr-reveal-down ----------------------------- */ .imghvr-reveal-down:before { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } /* imghvr-reveal-left ----------------------------- */ .imghvr-reveal-left:before { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } /* imghvr-reveal-right ----------------------------- */ .imghvr-reveal-right:before { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } /* imghvr-reveal-top-left ----------------------------- */ .imghvr-reveal-top-left:before { -webkit-transform: translate(-100%, -100%); -moz-transform: translate(-100%, -100%); -ms-transform: translate(-100%, -100%); -o-transform: translate(-100%, -100%); transform: translate(-100%, -100%); } /* imghvr-reveal-top-right ----------------------------- */ .imghvr-reveal-top-right:before { -webkit-transform: translate(100%, -100%); -moz-transform: translate(100%, -100%); -ms-transform: translate(100%, -100%); -o-transform: translate(100%, -100%); transform: translate(100%, -100%); } /* imghvr-reveal-bottom-left ----------------------------- */ .imghvr-reveal-bottom-left:before { -webkit-transform: translate(-100%, 100%); -moz-transform: translate(-100%, 100%); -ms-transform: translate(-100%, 100%); -o-transform: translate(-100%, 100%); transform: translate(-100%, 100%); } /* imghvr-reveal-bottom-right ----------------------------- */ .imghvr-reveal-bottom-right:before { -webkit-transform: translate(100%, 100%); -moz-transform: translate(100%, 100%); -ms-transform: translate(100%, 100%); -o-transform: translate(100%, 100%); transform: translate(100%, 100%); } /* imghvr-hinge-* ----------------------------- */ [class^='imghvr-hinge-'], [class*=' imghvr-hinge-'] { -webkit-perspective: 50em; -moz-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.21s; -moz-transition-delay: 0.21s; transition-delay: 0.21s; } /* imghvr-hinge-up ----------------------------- */ .imghvr-hinge-up img { -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } .imghvr-hinge-up figcaption { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .imghvr-hinge-up:hover > img { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); } .imghvr-hinge-up:hover figcaption { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); } /* imghvr-hinge-down ----------------------------- */ .imghvr-hinge-down img { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .imghvr-hinge-down figcaption { -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% -50%; -moz-transform-origin: 50% -50%; -ms-transform-origin: 50% -50%; -o-transform-origin: 50% -50%; transform-origin: 50% -50%; } .imghvr-hinge-down:hover > img { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); opacity: 0; } .imghvr-hinge-down:hover figcaption { -webkit-transform: rotateX(0); -moz-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); } /* imghvr-hinge-left ----------------------------- */ .imghvr-hinge-left img { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .imghvr-hinge-left figcaption { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .imghvr-hinge-left:hover > img { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); } .imghvr-hinge-left:hover figcaption { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); } /* imghvr-hinge-right ----------------------------- */ .imghvr-hinge-right img { -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .imghvr-hinge-right figcaption { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; } .imghvr-hinge-right:hover > img { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } .imghvr-hinge-right:hover figcaption { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); } /* imghvr-flip-* ----------------------------- */ [class^='imghvr-flip-'], [class*=' imghvr-flip-'] { -webkit-perspective: 50em; -moz-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.14s; -moz-transition-delay: 0.14s; transition-delay: 0.14s; } /* imghvr-flip-horiz ----------------------------- */ .imghvr-flip-horiz figcaption { -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .imghvr-flip-horiz:hover img { -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); transform: rotateX(-180deg); } .imghvr-flip-horiz:hover figcaption { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } /* imghvr-flip-vert ----------------------------- */ .imghvr-flip-vert figcaption { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } .imghvr-flip-vert:hover > img { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); } .imghvr-flip-vert:hover figcaption { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } /* imghvr-flip-diag-1 ----------------------------- */ .imghvr-flip-diag-1 figcaption { -webkit-transform: rotate3d(1, -1, 0, 100deg); -moz-transform: rotate3d(1, -1, 0, 100deg); -ms-transform: rotate3d(1, -1, 0, 100deg); -o-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); -moz-transform: rotate3d(-1, 1, 0, 100deg); -ms-transform: rotate3d(-1, 1, 0, 100deg); -o-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); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-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); -moz-transform: rotate3d(1, 1, 0, 100deg); -ms-transform: rotate3d(1, 1, 0, 100deg); -o-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); -moz-transform: rotate3d(-1, -1, 0, 100deg); -ms-transform: rotate3d(-1, -1, 0, 100deg); -o-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); -moz-transform: rotate3d(0, 0, 0, 0deg); -ms-transform: rotate3d(0, 0, 0, 0deg); -o-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: #135796; position: absolute; content: ''; -webkit-transition-delay: 0.105s; -moz-transition-delay: 0.105s; transition-delay: 0.105s; } [class^='imghvr-shutter-out-'] figcaption, [class*=' imghvr-shutter-out-'] figcaption { opacity: 0; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; } [class^='imghvr-shutter-out-']:hover:before, [class*=' imghvr-shutter-out-']:hover:before { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; } [class^='imghvr-shutter-out-']:hover figcaption, [class*=' imghvr-shutter-out-']:hover figcaption { opacity: 1; -webkit-transition-delay: 0.105s; -moz-transition-delay: 0.105s; transition-delay: 0.105s; } /* 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); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-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); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-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-']:before, [class*=' imghvr-shutter-in-']:after, [class*=' imghvr-shutter-in-']:before { background: #135796; 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.21s; -moz-transition-delay: 0.21s; transition-delay: 0.21s; } /* 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%; opacity: 0.75; } .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%; opacity: 0.75; } .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; -moz-transition: all 0.6s ease; transition: all 0.6s ease; opacity: 0.75; } .imghvr-shutter-in-out-diag-1:after { -webkit-transform: skew(-45deg) translateX(-150%); -moz-transform: skew(-45deg) translateX(-150%); -ms-transform: skew(-45deg) translateX(-150%); -o-transform: skew(-45deg) translateX(-150%); transform: skew(-45deg) translateX(-150%); } .imghvr-shutter-in-out-diag-1:before { -webkit-transform: skew(-45deg) translateX(150%); -moz-transform: skew(-45deg) translateX(150%); -ms-transform: skew(-45deg) translateX(150%); -o-transform: skew(-45deg) translateX(150%); transform: skew(-45deg) translateX(150%); } .imghvr-shutter-in-out-diag-1:hover:after { -webkit-transform: skew(-45deg) translateX(-50%); -moz-transform: skew(-45deg) translateX(-50%); -ms-transform: skew(-45deg) translateX(-50%); -o-transform: skew(-45deg) translateX(-50%); transform: skew(-45deg) translateX(-50%); } .imghvr-shutter-in-out-diag-1:hover:before { -webkit-transform: skew(-45deg) translateX(50%); -moz-transform: skew(-45deg) translateX(50%); -ms-transform: skew(-45deg) translateX(50%); -o-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; -moz-transition: all 0.6s ease; transition: all 0.6s ease; opacity: 0.75; } .imghvr-shutter-in-out-diag-2:after { -webkit-transform: skew(45deg) translateX(-100%); -moz-transform: skew(45deg) translateX(-100%); -ms-transform: skew(45deg) translateX(-100%); -o-transform: skew(45deg) translateX(-100%); transform: skew(45deg) translateX(-100%); } .imghvr-shutter-in-out-diag-2:before { -webkit-transform: skew(45deg) translateX(100%); -moz-transform: skew(45deg) translateX(100%); -ms-transform: skew(45deg) translateX(100%); -o-transform: skew(45deg) translateX(100%); transform: skew(45deg) translateX(100%); } .imghvr-shutter-in-out-diag-2:hover:after { -webkit-transform: skew(45deg) translateX(0%); -moz-transform: skew(45deg) translateX(0%); -ms-transform: skew(45deg) translateX(0%); -o-transform: skew(45deg) translateX(0%); transform: skew(45deg) translateX(0%); } .imghvr-shutter-in-out-diag-2:hover:before { -webkit-transform: skew(45deg) translateX(0%); -moz-transform: skew(45deg) translateX(0%); -ms-transform: skew(45deg) translateX(0%); -o-transform: skew(45deg) translateX(0%); transform: skew(45deg) translateX(0%); } /* imghvr-fold* ----------------------------- */ [class^='imghvr-fold'], [class*=' imghvr-fold'] { -webkit-perspective: 50em; -moz-perspective: 50em; perspective: 50em; } [class^='imghvr-fold'] img, [class*=' imghvr-fold'] img { -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-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; -moz-transition-delay: 0; transition-delay: 0; } [class^='imghvr-fold']:hover figcaption, [class*=' imghvr-fold']:hover figcaption { -webkit-transform: rotateX(0) translate3d(0, 0%, 0) scale(1); -moz-transform: rotateX(0) translate3d(0, 0%, 0) scale(1); -ms-transform: rotateX(0) translate3d(0, 0%, 0) scale(1); -o-transform: rotateX(0) translate3d(0, 0%, 0) scale(1); transform: rotateX(0) translate3d(0, 0%, 0) scale(1); opacity: 1; -webkit-transition-delay: 0.21s; -moz-transition-delay: 0.21s; transition-delay: 0.21s; } /* imghvr-fold-up ----------------------------- */ .imghvr-fold-up > img { -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } .imghvr-fold-up figcaption { -webkit-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6); -moz-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6); -ms-transform: rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6); -o-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%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .imghvr-fold-up:hover > img { -webkit-transform: rotateX(90deg) scale(0.6) translateY(50%); -moz-transform: rotateX(90deg) scale(0.6) translateY(50%); -ms-transform: rotateX(90deg) scale(0.6) translateY(50%); -o-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%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .imghvr-fold-down figcaption { -webkit-transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6); -moz-transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6); -ms-transform: rotateX(90deg) translate3d(0%, 50%, 0) scale(0.6); -o-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%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -o-transform-origin: 50% 0%; transform-origin: 50% 0%; } .imghvr-fold-down:hover > img { -webkit-transform: rotateX(-90deg) scale(0.6) translateY(-50%); -moz-transform: rotateX(-90deg) scale(0.6) translateY(-50%); -ms-transform: rotateX(-90deg) scale(0.6) translateY(-50%); -o-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%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .imghvr-fold-left figcaption { -webkit-transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6); -moz-transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6); -ms-transform: rotateY(90deg) translate3d(-50%, 0%, 0) scale(0.6); -o-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%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .imghvr-fold-left:hover > img { -webkit-transform: rotateY(-90deg) scale(0.6) translateX(50%); -moz-transform: rotateY(-90deg) scale(0.6) translateX(50%); -ms-transform: rotateY(-90deg) scale(0.6) translateX(50%); -o-transform: rotateY(-90deg) scale(0.6) translateX(50%); transform: rotateY(-90deg) scale(0.6) translateX(50%); } /* imghvr-fold-right ----------------------------- */ .imghvr-fold-right > img { -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; } .imghvr-fold-right figcaption { -webkit-transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6); -moz-transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6); -ms-transform: rotateY(-90deg) translate3d(50%, 0%, 0) scale(0.6); -o-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%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; } .imghvr-fold-right:hover > img { -webkit-transform: rotateY(90deg) scale(0.6) translateX(-50%); -moz-transform: rotateY(90deg) scale(0.6) translateX(-50%); -ms-transform: rotateY(90deg) scale(0.6) translateX(-50%); -o-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); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } .imghvr-zoom-in:hover figcaption { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-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); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-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); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition-delay: 0.35s; -moz-transition-delay: 0.35s; transition-delay: 0.35s; } /* imghvr-zoom-out ----------------------------- */ .imghvr-zoom-out:hover > img { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-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.4025s linear; -moz-animation: imghvr-zoom-out-up 0.4025s linear; animation: imghvr-zoom-out-up 0.4025s linear; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes imghvr-zoom-out-up { 50% { -webkit-transform: scale(0.8) translateY(0%); -moz-transform: scale(0.8) translateY(0%); -ms-transform: scale(0.8) translateY(0%); -o-transform: scale(0.8) translateY(0%); transform: scale(0.8) translateY(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateY(-150%); -moz-transform: scale(0.8) translateY(-150%); -ms-transform: scale(0.8) translateY(-150%); -o-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%); -moz-transform: scale(0.8) translateY(0%); -ms-transform: scale(0.8) translateY(0%); -o-transform: scale(0.8) translateY(0%); transform: scale(0.8) translateY(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateY(-150%); -moz-transform: scale(0.8) translateY(-150%); -ms-transform: scale(0.8) translateY(-150%); -o-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.4025s linear; -moz-animation: imghvr-zoom-out-down 0.4025s linear; animation: imghvr-zoom-out-down 0.4025s linear; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes imghvr-zoom-out-down { 50% { -webkit-transform: scale(0.8) translateY(0%); -moz-transform: scale(0.8) translateY(0%); -ms-transform: scale(0.8) translateY(0%); -o-transform: scale(0.8) translateY(0%); transform: scale(0.8) translateY(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateY(150%); -moz-transform: scale(0.8) translateY(150%); -ms-transform: scale(0.8) translateY(150%); -o-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%); -moz-transform: scale(0.8) translateY(0%); -ms-transform: scale(0.8) translateY(0%); -o-transform: scale(0.8) translateY(0%); transform: scale(0.8) translateY(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateY(150%); -moz-transform: scale(0.8) translateY(150%); -ms-transform: scale(0.8) translateY(150%); -o-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.4025s linear; -moz-animation: imghvr-zoom-out-left 0.4025s linear; animation: imghvr-zoom-out-left 0.4025s linear; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes imghvr-zoom-out-left { 50% { -webkit-transform: scale(0.8) translateX(0%); -moz-transform: scale(0.8) translateX(0%); -ms-transform: scale(0.8) translateX(0%); -o-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(-150%); -moz-transform: scale(0.8) translateX(-150%); -ms-transform: scale(0.8) translateX(-150%); -o-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%); -moz-transform: scale(0.8) translateX(0%); -ms-transform: scale(0.8) translateX(0%); -o-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(-150%); -moz-transform: scale(0.8) translateX(-150%); -ms-transform: scale(0.8) translateX(-150%); -o-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.4025s linear; -moz-animation: imghvr-zoom-out-right 0.4025s linear; animation: imghvr-zoom-out-right 0.4025s linear; -webkit-animation-iteration-count: 1; -moz-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes imghvr-zoom-out-right { 50% { -webkit-transform: scale(0.8) translateX(0%); -moz-transform: scale(0.8) translateX(0%); -ms-transform: scale(0.8) translateX(0%); -o-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(150%); -moz-transform: scale(0.8) translateX(150%); -ms-transform: scale(0.8) translateX(150%); -o-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%); -moz-transform: scale(0.8) translateX(0%); -ms-transform: scale(0.8) translateX(0%); -o-transform: scale(0.8) translateX(0%); transform: scale(0.8) translateX(0%); opacity: 0.5; } 100% { -webkit-transform: scale(0.8) translateX(150%); -moz-transform: scale(0.8) translateX(150%); -ms-transform: scale(0.8) translateX(150%); -o-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; -moz-perspective: 50em; perspective: 50em; } .imghvr-zoom-out-flip-horiz figcaption { opacity: 0; -webkit-transform: rotateX(90deg) translateY(-100%) scale(0.5); -moz-transform: rotateX(90deg) translateY(-100%) scale(0.5); -ms-transform: rotateX(90deg) translateY(-100%) scale(0.5); -o-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); -moz-transform: rotateX(-100deg) translateY(50%) scale(0.5); -ms-transform: rotateX(-100deg) translateY(50%) scale(0.5); -o-transform: rotateX(-100deg) translateY(50%) scale(0.5); transform: rotateX(-100deg) translateY(50%) scale(0.5); opacity: 0; -webkit-transition-delay: 0; -moz-transition-delay: 0; transition-delay: 0; } .imghvr-zoom-out-flip-horiz:hover figcaption, .imghvr-zoom-out-flip-horiz.hover figcaption { -webkit-transform: rotateX(0) translateY(0%) scale(1); -moz-transform: rotateX(0) translateY(0%) scale(1); -ms-transform: rotateX(0) translateY(0%) scale(1); -o-transform: rotateX(0) translateY(0%) scale(1); transform: rotateX(0) translateY(0%) scale(1); opacity: 1; -webkit-transition-delay: 0.35s; -moz-transition-delay: 0.35s; transition-delay: 0.35s; } /* imghvr-zoom-out-flip-vert ----------------------------- */ .imghvr-zoom-out-flip-vert { -webkit-perspective: 50em; -moz-perspective: 50em; perspective: 50em; } .imghvr-zoom-out-flip-vert figcaption { opacity: 0; -webkit-transform: rotateY(90deg) translate(50%, 0) scale(0.5); -moz-transform: rotateY(90deg) translate(50%, 0) scale(0.5); -ms-transform: rotateY(90deg) translate(50%, 0) scale(0.5); -o-transform: rotateY(90deg) translate(50%, 0) scale(0.5); transform: rotateY(90deg) translate(50%, 0) 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); -moz-transform: rotateY(-100deg) translateX(50%) scale(0.5); -ms-transform: rotateY(-100deg) translateX(50%) scale(0.5); -o-transform: rotateY(-100deg) translateX(50%) scale(0.5); transform: rotateY(-100deg) translateX(50%) scale(0.5); opacity: 0; -webkit-transition-delay: 0; -moz-transition-delay: 0; transition-delay: 0; } .imghvr-zoom-out-flip-vert:hover figcaption, .imghvr-zoom-out-flip-vert.hover figcaption { -webkit-transform: rotateY(0) translate(0, 0) scale(1); -moz-transform: rotateY(0) translate(0, 0) scale(1); -ms-transform: rotateY(0) translate(0, 0) scale(1); -o-transform: rotateY(0) translate(0, 0) scale(1); transform: rotateY(0) translate(0, 0) scale(1); opacity: 1; -webkit-transition-delay: 0.35s; -moz-transition-delay: 0.35s; transition-delay: 0.35s; } /* imghvr-blur ----------------------------- */ .imghvr-blur figcaption { opacity: 0; } .imghvr-blur:hover > img { -webkit-filter: blur(30px); filter: blur(30px); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); opacity: 0; } .imghvr-blur:hover figcaption { opacity: 1; -webkit-transition-delay: 0.21s; -moz-transition-delay: 0.21s; transition-delay: 0.21s; } /*# sourceMappingURL=imagehover.css.map */