File Manager

📁 Media Files

📁 .. (Parent Directory) 🔧 about.php 🎨 imagehover.min.css

⬆️ Upload Files

📁 Create Folder

📄 Create File

🎨 Edit: imagehover.min.css

CSS

Size: 13.66 KB | Modified: 2022-03-12 10:19:54

@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;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:#fff}[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:#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-"]:after,[class*=" imghvr-"] :after,[class*=" imghvr-"]:before,[class*=" imghvr-"] :before,[class^=imghvr-],[class^=imghvr-] *,[class^=imghvr-]:after,[class^=imghvr-] :after,[class^=imghvr-]:before,[class^=imghvr-] :before{box-sizing:border-box;transition:all .35s ease}[class*=" imghvr-fade"] figcaption,[class^=imghvr-fade] figcaption{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{transform:translate(0)}.imghvr-fade-in-up figcaption{transform:translateY(15%)}.imghvr-fade-in-down figcaption{transform:translateY(-15%)}.imghvr-fade-in-left figcaption{transform:translate(-15%)}.imghvr-fade-in-right figcaption{transform:translate(15%)}[class*=" imghvr-push-"]:hover figcaption,[class^=imghvr-push-]:hover figcaption{transform:translate(0)}.imghvr-push-up figcaption{transform:translateY(100%)}.imghvr-push-down figcaption,.imghvr-push-up:hover>img{transform:translateY(-100%)}.imghvr-push-down:hover>img{transform:translateY(100%)}.imghvr-push-left figcaption{transform:translateX(100%)}.imghvr-push-left:hover>img,.imghvr-push-right figcaption{transform:translateX(-100%)}.imghvr-push-right:hover>img{transform:translateX(100%)}[class*=" imghvr-slide-"]:hover figcaption,[class^=imghvr-slide-]:hover figcaption{transform:translate(0)}.imghvr-slide-up figcaption{transform:translateY(100%)}.imghvr-slide-down figcaption{transform:translateY(-100%)}.imghvr-slide-left figcaption{transform:translateX(100%)}.imghvr-slide-right figcaption{transform:translateX(-100%)}.imghvr-slide-top-left figcaption{transform:translate(-100%,-100%)}.imghvr-slide-top-right figcaption{transform:translate(100%,-100%)}.imghvr-slide-bottom-left figcaption{transform:translate(-100%,100%)}.imghvr-slide-bottom-right figcaption{transform:translate(100%,100%)}[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{transform:translate(0)}[class*=" imghvr-reveal-"]:hover figcaption,[class^=imghvr-reveal-]:hover figcaption{opacity:1;transition-delay:.21s}.imghvr-reveal-up:before{transform:translateY(100%)}.imghvr-reveal-down:before{transform:translateY(-100%)}.imghvr-reveal-left:before{transform:translateX(100%)}.imghvr-reveal-right:before{transform:translateX(-100%)}.imghvr-reveal-top-left:before{transform:translate(-100%,-100%)}.imghvr-reveal-top-right:before{transform:translate(100%,-100%)}.imghvr-reveal-bottom-left:before{transform:translate(-100%,100%)}.imghvr-reveal-bottom-right:before{transform:translate(100%,100%)}[class*=" imghvr-hinge-"],[class^=imghvr-hinge-]{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;transition-delay:.21s}.imghvr-hinge-up img{transform-origin:50% 0}.imghvr-hinge-up figcaption{transform:rotateX(90deg);transform-origin:50% 100%}.imghvr-hinge-up:hover>img{transform:rotateX(-90deg)}.imghvr-hinge-up:hover figcaption{transform:rotateX(0)}.imghvr-hinge-down img{transform-origin:50% 100%}.imghvr-hinge-down figcaption{transform:rotateX(-90deg);transform-origin:50% -50%}.imghvr-hinge-down:hover>img{transform:rotateX(90deg);opacity:0}.imghvr-hinge-down:hover figcaption{transform:rotateX(0)}.imghvr-hinge-left img{transform-origin:0 50%}.imghvr-hinge-left figcaption{transform:rotateY(-90deg);transform-origin:100% 50%}.imghvr-hinge-left:hover>img{transform:rotateY(90deg)}.imghvr-hinge-left:hover figcaption{transform:rotateY(0)}.imghvr-hinge-right img{transform-origin:100% 50%}.imghvr-hinge-right figcaption{transform:rotateY(90deg);transform-origin:0 50%}.imghvr-hinge-right:hover>img{transform:rotateY(-90deg)}.imghvr-hinge-right:hover figcaption{transform:rotateY(0)}[class*=" imghvr-flip-"],[class^=imghvr-flip-]{perspective:50em}[class*=" imghvr-flip-"] img,[class^=imghvr-flip-] img{-webkit-backface-visibility:hidden;backface-visibility:hidden}[class*=" imghvr-flip-"]:hover>img,[class*=" imghvr-flip-"] figcaption,[class^=imghvr-flip-]:hover>img,[class^=imghvr-flip-] figcaption{opacity:0}[class*=" imghvr-flip-"]:hover figcaption,[class^=imghvr-flip-]:hover figcaption{opacity:1;transition-delay:.14s}.imghvr-flip-horiz figcaption{transform:rotateX(90deg);transform-origin:0 50%}.imghvr-flip-horiz:hover img{transform:rotateX(-180deg)}.imghvr-flip-horiz:hover figcaption{transform:rotateX(0deg)}.imghvr-flip-vert figcaption{transform:rotateY(90deg);transform-origin:50% 0}.imghvr-flip-vert:hover>img{transform:rotateY(-180deg)}.imghvr-flip-vert:hover figcaption{transform:rotateY(0deg)}.imghvr-flip-diag-1 figcaption{transform:rotate3d(1,-1,0,100deg)}.imghvr-flip-diag-1:hover>img{transform:rotate3d(-1,1,0,100deg)}.imghvr-flip-diag-1:hover figcaption{transform:rotate3d(0,0,0,0deg)}.imghvr-flip-diag-2 figcaption{transform:rotate3d(1,1,0,100deg)}.imghvr-flip-diag-2:hover>img{transform:rotate3d(-1,-1,0,100deg)}.imghvr-flip-diag-2:hover figcaption{transform:rotate3d(0,0,0,0deg)}[class*=" imghvr-shutter-out-"]:before,[class^=imghvr-shutter-out-]:before{background:#135796;position:absolute;content:"";transition-delay:.105s}[class*=" imghvr-shutter-out-"] figcaption,[class^=imghvr-shutter-out-] figcaption{opacity:0;transition-delay:0s}[class*=" imghvr-shutter-out-"]:hover:before,[class^=imghvr-shutter-out-]:hover:before{transition-delay:0s}[class*=" imghvr-shutter-out-"]:hover figcaption,[class^=imghvr-shutter-out-]:hover figcaption{opacity:1;transition-delay:.105s}.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:before{top:50%;bottom:50%;left:0;right:0}.imghvr-shutter-out-vert:hover:before{top:0;bottom:0}.imghvr-shutter-out-diag-1:before{top:50%;bottom:50%;left:-35%;right:-35%;transform:rotate(45deg)}.imghvr-shutter-out-diag-1:hover:before{top:-35%;bottom:-35%}.imghvr-shutter-out-diag-2:before{top:50%;bottom:50%;left:-35%;right:-35%;transform:rotate(-45deg)}.imghvr-shutter-out-diag-2:hover:before{top:-35%;bottom:-35%}[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;transition-delay:.21s}.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: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:after,.imghvr-shutter-in-out-horiz:before{width:0;height:100%;opacity:.75}.imghvr-shutter-in-out-horiz:hover:after,.imghvr-shutter-in-out-horiz:hover:before{width:100%}.imghvr-shutter-in-out-vert:after,.imghvr-shutter-in-out-vert:before{height:0;width:100%;opacity:.75}.imghvr-shutter-in-out-vert:hover:after,.imghvr-shutter-in-out-vert:hover:before{height:100%}.imghvr-shutter-in-out-diag-1:after,.imghvr-shutter-in-out-diag-1:before{width:200%;height:200%;transition:all .6s ease;opacity:.75}.imghvr-shutter-in-out-diag-1:after{transform:skew(-45deg) translateX(-150%)}.imghvr-shutter-in-out-diag-1:before{transform:skew(-45deg) translateX(150%)}.imghvr-shutter-in-out-diag-1:hover:after{transform:skew(-45deg) translateX(-50%)}.imghvr-shutter-in-out-diag-1:hover:before{transform:skew(-45deg) translateX(50%)}.imghvr-shutter-in-out-diag-2:after,.imghvr-shutter-in-out-diag-2:before{width:200%;height:200%;transition:all .6s ease;opacity:.75}.imghvr-shutter-in-out-diag-2:after{transform:skew(45deg) translateX(-100%)}.imghvr-shutter-in-out-diag-2:before{transform:skew(45deg) translateX(100%)}.imghvr-shutter-in-out-diag-2:hover:after,.imghvr-shutter-in-out-diag-2:hover:before{transform:skew(45deg) translateX(0)}[class*=" imghvr-fold"],[class^=imghvr-fold]{perspective:50em}[class*=" imghvr-fold"] img,[class^=imghvr-fold] img{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;transition-delay:0}[class*=" imghvr-fold"]:hover figcaption,[class^=imghvr-fold]:hover figcaption{transform:rotateX(0) translateZ(0) scale(1);opacity:1;transition-delay:.21s}.imghvr-fold-up>img{transform-origin:50% 0}.imghvr-fold-up figcaption{transform:rotateX(-90deg) translate3d(0,-50%,0) scale(.6);transform-origin:50% 100%}.imghvr-fold-up:hover>img{transform:rotateX(90deg) scale(.6) translateY(50%)}.imghvr-fold-down>img{transform-origin:50% 100%}.imghvr-fold-down figcaption{transform:rotateX(90deg) translate3d(0,50%,0) scale(.6);transform-origin:50% 0}.imghvr-fold-down:hover>img{transform:rotateX(-90deg) scale(.6) translateY(-50%)}.imghvr-fold-left>img{transform-origin:0 50%}.imghvr-fold-left figcaption{transform:rotateY(90deg) translate3d(-50%,0,0) scale(.6);transform-origin:100% 50%}.imghvr-fold-left:hover>img{transform:rotateY(-90deg) scale(.6) translateX(50%)}.imghvr-fold-right>img{transform-origin:100% 50%}.imghvr-fold-right figcaption{transform:rotateY(-90deg) translate3d(50%,0,0) scale(.6);transform-origin:0 50%}.imghvr-fold-right:hover>img{transform:rotateY(90deg) scale(.6) translateX(-50%)}.imghvr-zoom-in figcaption{opacity:0;transform:scale(.5)}.imghvr-zoom-in:hover figcaption{transform:scale(1);opacity:1}[class*=" imghvr-zoom-out"] figcaption,[class^=imghvr-zoom-out] figcaption{transform:scale(.5);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{transform:scale(1);opacity:1;transition-delay:.35s}.imghvr-zoom-out:hover>img{transform:scale(.5);opacity:0}.imghvr-zoom-out-up.hover>img,.imghvr-zoom-out-up:hover>img{animation:a .4025s linear;animation-iteration-count:1;animation-fill-mode:forwards}@keyframes a{50%{transform:scale(.8) translateY(0);opacity:.5}to{transform:scale(.8) translateY(-150%);opacity:.5}}.imghvr-zoom-out-down.hover>img,.imghvr-zoom-out-down:hover>img{animation:b .4025s linear;animation-iteration-count:1;animation-fill-mode:forwards}@keyframes b{50%{transform:scale(.8) translateY(0);opacity:.5}to{transform:scale(.8) translateY(150%);opacity:.5}}.imghvr-zoom-out-left.hover>img,.imghvr-zoom-out-left:hover>img{animation:c .4025s linear;animation-iteration-count:1;animation-fill-mode:forwards}@keyframes c{50%{transform:scale(.8) translateX(0);opacity:.5}to{transform:scale(.8) translateX(-150%);opacity:.5}}.imghvr-zoom-out-right.hover>img,.imghvr-zoom-out-right:hover>img{animation:d .4025s linear;animation-iteration-count:1;animation-fill-mode:forwards}@keyframes d{50%{transform:scale(.8) translateX(0);opacity:.5}to{transform:scale(.8) translateX(150%);opacity:.5}}.imghvr-zoom-out-flip-horiz{perspective:50em}.imghvr-zoom-out-flip-horiz figcaption{opacity:0;transform:rotateX(90deg) translateY(-100%) scale(.5)}.imghvr-zoom-out-flip-horiz.hover>img,.imghvr-zoom-out-flip-horiz:hover>img{transform:rotateX(-100deg) translateY(50%) scale(.5);opacity:0;transition-delay:0}.imghvr-zoom-out-flip-horiz.hover figcaption,.imghvr-zoom-out-flip-horiz:hover figcaption{transform:rotateX(0) translateY(0) scale(1);opacity:1;transition-delay:.35s}.imghvr-zoom-out-flip-vert{perspective:50em}.imghvr-zoom-out-flip-vert figcaption{opacity:0;transform:rotateY(90deg) translate(50%) scale(.5)}.imghvr-zoom-out-flip-vert.hover>img,.imghvr-zoom-out-flip-vert:hover>img{transform:rotateY(-100deg) translateX(50%) scale(.5);opacity:0;transition-delay:0}.imghvr-zoom-out-flip-vert.hover figcaption,.imghvr-zoom-out-flip-vert:hover figcaption{transform:rotateY(0) translate(0) scale(1);opacity:1;transition-delay:.35s}.imghvr-blur figcaption{opacity:0}.imghvr-blur:hover>img{filter:blur(30px);transform:scale(1.2);opacity:0}.imghvr-blur:hover figcaption{opacity:1;transition-delay:.21s}

Supports: PHP, ASPX, HTML, JavaScript, CSS and other text-based files

📥 Download

File manager

📁 Media Files

⬆️ Upload Files

📁 Create Folder

📄 Create File

🎨 Edit: imagehover.min.css