/* 
Xoverlay
--------------------------------------------------------
Author: Echothemes
Author UI: http://echothemes.ehungers.com
Item Name: Xoverlay
Description: CSS Hover Effects
Version: 1.0
*/

/*===== general css =====*/ .xoverlay{ position:relative; overflow:hidden; perspective: 300px; -webkit-perspective: 300px; -ms-perspective: 300px; -o-perspective: 300px; } .xoverlay .x-img-main{ width:100%; } .xoverlay-data{ width:100%; height:100%;} .xoverlay-data p{ color:#fff; text-align:left; padding:10px; margin:0; float:left; font-size:13px; } .xoverlay h2{ font-size:16px; margin:0; float:left; display:block; padding:10px 10px 0 10px; color:#f1c40f; } .xoverlay span{ display: inline-block; position: relative; top: 33%; margin:0 3%; } .xoverlay span i{ text-align:center; font-size:40px; width:50px; height:50px; padding:5%; } @media(max-width:530px) { .xoverlay span i{ text-align:center; font-size:27px; width:35px; height:35px; padding:5%; } } @media(max-width:530px) { .xoverlay span i{ text-align:center; font-size:19px; width:25px; height:25px; padding:5%; } } @media(max-width:302px) { .xoverlay span i{ text-align:center; font-size:10px; width:15px; height:15px; padding:5%;} } .x-more,.x-more:hover{ background: #ffffff; border-radius: 2px; clear: both; color: #858585; padding: 3px 7px; float:left; margin:0 10px; text-decoration:none; } /*===== Icon style =====*/ .xoverlay .x-circle i{ border-radius:50%; border:2px solid; } .xoverlay .x-square i{ border:2px solid; } .xoverlay .x-lemon  i{ border:2px solid; border-radius:50% 0; } .xoverlay .x-balloon  i{ border:2px solid; border-radius:50% 0 50% 50%; } .xoverlay .x-smooth  i{ border:2px solid; border-radius:10%; } .x-white i{ color:#ffffff; border-color:#ffffff; } .x-yellow i{ color:#f1c40f; border-color:#f1c40f; } .x-green i{ color:#2ecc71; border-color:#2ecc71; } .x-blue i{ color:#1abc9c; border-color:#1abc9c; } .x-red i{ color:#e74c3c; border-color:#e74c3c; } .x-orange i{ color:#e67e22; border-color:#e67e22; } /*===== Simple Opacity =====*/ .x-simple .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; bottom:0; top:0; opacity:0; background:rgba(27,27,27,.7); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-simple:hover .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; bottom:0; top:0; opacity:1; background:rgba(27,27,27,.7); } /*===== Slide Up =====*/ .x-bottom .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; bottom:-500px; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-bottom:hover .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; bottom:0; background:#015f86; } /*===== Slide Down =====*/ .x-top .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; top:-500px; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-top:hover .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; top:0; background:#015f86; } /*===== Slide Left =====*/ .x-left .xoverlay-box{ width:100%; height:100%; position:absolute; top:0; bottom:0; right:0; left:-500px; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-left:hover .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; top:0; bottom:0; background:#015f86; } /*===== Slide Right =====*/ .x-right .xoverlay-box{ width:100%; height:100%; position:absolute; top:0; bottom:0; right:-500px; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-right:hover .xoverlay-box{ width:100%; height:100%; position:absolute; right:0; top:0; bottom:0; background:#015f86; } /*===== Slide Top Left =====*/ .x-top-left .xoverlay-box{ width:100%; height:100%; position:absolute; top:-500px; left:-500px; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-top-left:hover .xoverlay-box{ width:100%; height:100%; position:absolute; top:0; left:0; background:#015f86; } /*===== Slide Top Right =====*/ .x-top-right .xoverlay-box{ width:100%; height:100%; position:absolute; top:-500px; right:-500px; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-top-right:hover .xoverlay-box{ width:100%; height:100%; position:absolute; top:0; right:0; background:#015f86; } /*===== Slide Bottom Left =====*/ .x-bottom-left .xoverlay-box{ width:100%; height:100%; position:absolute; bottom:-500px; left:-500px; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-bottom-left:hover .xoverlay-box{ width:100%; height:100%; position:absolute; bottom:0; left:0; background:#015f86; } /*===== Slide Bottom Right =====*/ .x-bottom-right .xoverlay-box{ width:100%; height:100%; position:absolute; bottom:-500px; right:-500px; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-bottom-right:hover .xoverlay-box{ width:100%; height:100%; position:absolute; bottom:0; right:0; background:#015f86; } /*===== Flip Left =====*/ .x-flip-left .xoverlay-box{ transform-origin: center left; -ms-transform-origin: center left; -webkit-transform-origin: center left; transform:rotateY(131deg); -ms-transform:rotateY(131deg); -webkit-transform:rotateY(131deg); width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-flip-left:hover .xoverlay-box{ transform-origin: center left; -ms-transform-origin: center left; -webkit-transform-origin: center left; transform:rotateY(0deg); -ms-transform:rotateY(0deg); -webkit-transform:rotateY(0deg); width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; right:0; background:#015f86; } /*===== Flip Right =====*/ .x-flip-right .xoverlay-box{ transform-origin: center right; -ms-transform-origin: center right; -webkit-transform-origin: center right; transform:rotateY(-133deg); -ms-transform:rotateY(-133deg); -webkit-transform:rotateY(-133deg); width:100%; height:100%; position:absolute; top:0; bottom:0; right:0; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-flip-right:hover .xoverlay-box{ transform-origin: center right; -ms-transform-origin: center right; -webkit-transform-origin: center right; transform:rotateY(0deg); -ms-transform:rotateY(0deg); -webkit-transform:rotateY(0deg); width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; right:0; background:#015f86; } /*===== Flip Top =====*/ .x-flip-top .xoverlay-box{ transform-origin: center top; -ms-transform-origin: center top; -webkit-transform-origin: center top; transform:rotateX(-125deg); -ms-transform:rotateX(-125deg); -webkit-transform:rotateX(-125deg); width:100%; height:100%; position:absolute; top:0; bottom:0; right:0; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-flip-top:hover .xoverlay-box{ transform-origin: center top; -ms-transform-origin: center top; -webkit-transform-origin: center top; transform:rotateX(0deg); -ms-transform:rotateX(0deg); -webkit-transform:rotateX(0deg); width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; right:0; background:#015f86; } /*===== Flip Bottom =====*/ .x-flip-bottom .xoverlay-box{ transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform:rotateX(131deg); -ms-transform:rotateX(131deg); -webkit-transform:rotateX(131deg); width:100%; height:100%; position:absolute; top:0; bottom:0; right:0; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-flip-bottom:hover .xoverlay-box{ transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform:rotateX(0deg); -ms-transform:rotateX(0deg); -webkit-transform:rotateX(0deg); width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; right:0; background:#015f86; } /*===== Wobble Left =====*/ .x-wobble-left .xoverlay-box{ transform-origin: center left; -ms-transform-origin: center left; -webkit-transform-origin: center left; transform:rotateY(131deg); -ms-transform:rotateY(131deg); -webkit-transform:rotateY(131deg); width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; background:#015f86; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } .x-wobble-left:hover .xoverlay-box{ transform-origin: center right; -ms-transform-origin: center right; -webkit-transform-origin: center right; transform:rotateY(0deg); -ms-transform:rotateY(0deg); -webkit-transform:rotateY(0deg); width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; right:0; background:#015f86; } /*===== Wobble Right =====*/ .x-wobble-right .xoverlay-box{ transform-origin: center right; -ms-transform-origin: center right; -webkit-transform-origin: center right; transform:rotateY(-133deg); -ms-transform:rotateY(-133deg); -webkit-transform:rotateY(-133deg); width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; background:#015f86; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } .x-wobble-right:hover .xoverlay-box{ transform-origin: center left; -ms-transform-origin: center left; -webkit-transform-origin: center left; transform:rotateY(0deg); -ms-transform:rotateY(0deg); -webkit-transform:rotateY(0deg); width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; right:0; background:#015f86; } /*===== Wobble Top =====*/ .x-wobble-top .xoverlay-box{ transform-origin: center top; -ms-transform-origin: center top; -webkit-transform-origin: center top; transform:rotateX(-131deg); -ms-transform:rotateX(-131deg); -webkit-transform:rotateX(-131deg); width:100%; height:100%; position:absolute; top:0; bottom:0; right:0; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-wobble-top:hover .xoverlay-box{ transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform:rotateX(0deg); -ms-transform:rotateX(0deg); -webkit-transform:rotateX(0deg); width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; right:0; background:#015f86; } /*===== Wobble Bottom =====*/ .x-wobble-bottom .xoverlay-box{ transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform:rotateX(131deg); -ms-transform:rotateX(131deg); -webkit-transform:rotateX(131deg); width:100%; height:100%; position:absolute; top:0; bottom:0; right:0; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-wobble-bottom:hover .xoverlay-box{ transform-origin: center top; -ms-transform-origin: center top; -webkit-transform-origin: center top; transform:rotateX(0deg); -ms-transform:rotateX(0deg); -webkit-transform:rotateX(0deg); width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; right:0; background:#015f86; } /*===== Push Left =====*/ .x-fpush-left .xoverlay-box{ transform-origin: center left; -ms-transform-origin: center left; -webkit-transform-origin: center left; transform:rotateY(131deg); -ms-transform:rotateY(131deg); -webkit-transform:rotateY(131deg); width:50%; height:100%; position:absolute; top:0; bottom:0; left:0; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-fpush-left:hover .xoverlay-box{ transform-origin: center left; -ms-transform-origin: center left; -webkit-transform-origin: center left; transform:rotateY(0deg); -ms-transform:rotateY(0deg); -webkit-transform:rotateY(0deg); width:50%; height:100%; position:absolute; top:0; bottom:0; left:0; right:0; background:#015f86; } .x-fpush-left .x-img-main{ -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-fpush-left:hover .x-img-main{ transform:translateX(20%); -ms-transform:translateX(20%); -webkit-transform:translateX(20%); }/*===== Push Right =====*/ .x-fpush-right .xoverlay-box{ transform-origin: center right; -ms-transform-origin: center right; -webkit-transform-origin: center right; transform:rotateY(-132deg); -ms-transform:rotateY(-132deg); -webkit-transform:rotateY(-132deg); width:50%; height:100%; position:absolute; top:0; bottom:0; right:0; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-fpush-right:hover .xoverlay-box{ transform-origin: center right; -ms-transform-origin: center right; -webkit-transform-origin: center right; transform:rotateY(0deg); -ms-transform:rotateY(0deg); -webkit-transform:rotateY(0deg); width:50%; height:100%; position:absolute; top:0; bottom:0; right:0; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-fpush-right .x-img-main{ -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-fpush-right:hover .x-img-main{ transform:translateX(-20%); -ms-transform:translateX(-20%); -webkit-transform:translateX(-20%); }/*===== Push Top =====*/ .x-fpush-top .xoverlay-box{ transform-origin: center top; -ms-transform-origin: center top; -webkit-transform-origin: center top; transform:rotateX(-125deg); -ms-transform:rotateX(-125deg); -webkit-transform:rotateX(-125deg); width:100%; height:70%; position:absolute; top:0; bottom:0; right:0; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-fpush-top:hover .xoverlay-box{ transform-origin: center top; -ms-transform-origin: center top; -webkit-transform-origin: center top; transform:rotateX(0deg); -ms-transform:rotateX(0deg); -webkit-transform:rotateX(0deg); width:100%; height:70%; position:absolute; top:0; bottom:0; right:0; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-fpush-top .x-img-main{ -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-fpush-top:hover .x-img-main{ transform:translateY(20%); -ms-transform:translateY(20%); -webkit-transform:translateY(20%); }/*===== Push Bottom =====*/ .x-fpush-bottom .xoverlay-box{ transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform:rotateX(131deg); -ms-transform:rotateX(131deg); -webkit-transform:rotateX(131deg); width:100%; height:70%; position:absolute; bottom:0; right:0; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-fpush-bottom:hover .xoverlay-box{ transform-origin: center bottom; -ms-transform-origin: center bottom; -webkit-transform-origin: center bottom; transform:rotateX(0deg); -ms-transform:rotateX(0deg); -webkit-transform:rotateX(0deg); width:100%; height:70%; position:absolute; bottom:0; right:0; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-fpush-bottom .x-img-main{ -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-fpush-bottom:hover .x-img-main{ transform:translateY(-20%); -ms-transform:translateY(-20%); -webkit-transform:translateY(-20%); }/*===== Push Full Left =====*/ .x-pushfull-left .xoverlay-box{ width:100%; height:100%; position:absolute; top:0; bottom:0; right:0; left:-100%; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-pushfull-left:hover .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; top:0; bottom:0; background:#015f86; } .x-pushfull-left .x-img-main{ -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-pushfull-left:hover .x-img-main{ transform:translateX(100%); -ms-transform:translateX(100%); -webkit-transform:translateX(100%); }/*===== Push Full Right =====*/ .x-pushfull-right .xoverlay-box{ width:100%; height:100%; position:absolute; top:0; bottom:0; right:-100%; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-pushfull-right:hover .xoverlay-box{ width:100%; height:100%; position:absolute; right:0; top:0; bottom:0; background:#015f86; } .x-pushfull-right .x-img-main{ -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-pushfull-right:hover .x-img-main{ transform:translateX(-100%); -ms-transform:translateX(-100%); -webkit-transform:translateX(-100%); }/*===== Push Full Top =====*/ .x-pushfull-top .xoverlay-box{ width:100%; height:100%; position:absolute; top:-100%; right:0; left:0; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-pushfull-top:hover .xoverlay-box{ width:100%; height:100%; position:absolute; right:0; top:0; left:0; background:#015f86; } .x-pushfull-top .x-img-main{ -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-pushfull-top:hover .x-img-main{ transform:translateY(100%); -ms-transform:translateY(100%); -webkit-transform:translateY(100%); }/*===== Push Full Bottom =====*/ .x-pushfull-bottom .xoverlay-box{ width:100%; height:100%; position:absolute; bottom:-100%; right:0; left:0; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-pushfull-bottom:hover .xoverlay-box{ width:100%; height:100%; position:absolute; right:0; bottom:0; left:0; background:#015f86; } .x-pushfull-bottom .x-img-main{ -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-pushfull-bottom:hover .x-img-main{ transform:translateY(-100%); -ms-transform:translateY(-100%); -webkit-transform:translateY(-100%); }/*===== Image Rotate Left =====*/ .x-imgrotate-left .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; bottom:0; top:0; opacity:0; background:rgba(27,27,27,0.7); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-imgrotate-left:hover .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; bottom:0; top:0; opacity:1; background:rgba(27,27,27,0.7); } .x-imgrotate-left .x-img-main{ -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-imgrotate-left:hover .x-img-main{ -ms-transform: rotate(30deg) scale(1.5,1.5); -webkit-transform: rotate(30deg) scale(1.5,1.5); transform: rotate(30deg) scale(1.5,1.5); }/*===== Image Rotate Right =====*/ .x-imgrotate-right .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; bottom:0; top:0; opacity:0; background:rgba(27,27,27,0.7); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-imgrotate-right:hover .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; bottom:0; top:0; opacity:1; background:rgba(27,27,27,0.7); } .x-imgrotate-right .x-img-main{ -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-imgrotate-right:hover .x-img-main{ -ms-transform: rotate(-30deg) scale(1.5,1.5); -webkit-transform: rotate(-30deg) scale(1.5,1.5); transform: rotate(-30deg) scale(1.5,1.5); }/*===== Zoom =====*/ .x-zoom .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; bottom:0; top:0; overflow:hidden; -ms-transform:scale(0,0); -webkit-transform:scale(0,0); transform:scale(0,0); background:#015f86; background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-zoom:hover .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; bottom:0; top:0; overflow:hidden; background:#015f86; -ms-transform:scale(1,1); -webkit-transform:scale(1,1); transform:scale(1,1); }/*===== Zoom In Out =====*/ .x-zoom-inout .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; bottom:0; top:0; overflow:hidden; -ms-transform:scale(0,0); -webkit-transform:scale(0,0); transform:scale(0,0); background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-zoom-inout:hover .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; bottom:0; top:0; overflow:hidden; background:#015f86; -ms-transform:scale(1,1); -webkit-transform:scale(1,1); transform:scale(1,1); }.x-zoom-inout .x-img-main{ -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-zoom-inout:hover .x-img-main{ -ms-transform:scale(0,0); -webkit-transform:scale(0,0); transform:scale(0,0); }/*===== Zoom Rotate =====*/ .x-zoom-rotate .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; bottom:0; top:0; overflow:hidden; ms-transform:rotate(0deg) scale(0,0); -webkit-transform:rotate(0deg) scale(0,0); transform:rotate(0deg) scale(0,0); background:#015f86; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .x-zoom-rotate:hover .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; bottom:0; top:0; overflow:hidden; background:#015f86; -ms-transform:rotate(360deg) scale(1,1); -webkit-transform:rotate(360deg) scale(1,1); transform:rotate(360deg) scale(1,1); }/*===== Zoom RotateY =====*/ .x-zoom-rotatey .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; bottom:0; top:0; overflow:hidden; ms-transform:rotateY(0deg) scale(0,0); -webkit-transform:rotateY(0deg) scale(0,0); transform:rotateY(0deg) scale(0,0); background:#015f86; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } .x-zoom-rotatey:hover .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; bottom:0; top:0; overflow:hidden; background:#015f86; -ms-transform:rotateY(360deg) scale(1,1); -webkit-transform:rotateY(360deg) scale(1,1); transform:rotateY(360deg) scale(1,1); }/*===== Zoom RotateX =====*/ .x-zoom-rotatex .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; bottom:0; top:0; overflow:hidden; ms-transform:rotateX(0deg) scale(0,0); -webkit-transform:rotateX(0deg) scale(0,0); transform:rotateX(0deg) scale(0,0); background:#015f86; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } .x-zoom-rotatex:hover .xoverlay-box{ width:100%; height:100%; position:absolute; left:0; right:0; bottom:0; top:0; overflow:hidden; background:#015f86; -ms-transform:rotateX(360deg) scale(1,1); -webkit-transform:rotateX(360deg) scale(1,1); transform:rotateX(360deg) scale(1,1); }/*===== Slide Icon Top Bottom =====*/ .xoverlay .x-icon-top-bottom span:nth-of-type(1){ opacity:0; transform:translateY(-500%); -ms-transform:translateY(-500%); -webkit-transform:translateY(-500%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-top-bottom span:nth-of-type(1){ opacity:1; transform:translateY(0%); -ms-transform:translateY(0%); -webkit-transform:translateY(0%); }.xoverlay .x-icon-top-bottom span:nth-of-type(2){ opacity:0; transform:scale(0,0); -ms-transform:scale(0,0); -webkit-transform:scale(0,0); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-top-bottom span:nth-of-type(2){ opacity:1; transform:scale(1,1); -ms-transform:scale(1,1); -webkit-transform:scale(1,1); }.xoverlay .x-icon-top-bottom span:nth-of-type(3){ opacity:0; transform:translateY(300%); -ms-transform:translateY(300%); -webkit-transform:translateY(300%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-top-bottom span:nth-of-type(3){ opacity:1; transform:translateY(0%); -ms-transform:translateY(0%); -webkit-transform:translateY(0%); }/*===== Slide Icon Left Right =====*/ .xoverlay .x-icon-left-right span:nth-of-type(1){ opacity:0; transform:translateX(-500%); -ms-transform:translateX(-500%); -webkit-transform:translateX(-500%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-left-right span:nth-of-type(1){ opacity:1; transform:translateX(0%); -ms-transform:translateX(0%); -webkit-transform:translateX(0%); }.xoverlay .x-icon-left-right span:nth-of-type(2){ opacity:0; transform:scale(0,0); -ms-transform:scale(0,0); -webkit-transform:scale(0,0); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-left-right span:nth-of-type(2){ opacity:1; transform:scale(1,1); -ms-transform:scale(1,1); -webkit-transform:scale(1,1); }.xoverlay .x-icon-left-right span:nth-of-type(3){ opacity:0; transform:translateX(300%); -ms-transform:translateX(300%); -webkit-transform:translateX(300%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-left-right span:nth-of-type(3){ opacity:1; transform:translateX(0%); -ms-transform:translateX(0%); -webkit-transform:translateX(0%); }/*===== Zoom Icon =====*/ .xoverlay .x-icon-zoom span{ opacity:0; transform:scale(0,0); -ms-transform:scale(0,0); -webkit-transform:scale(0,0); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-zoom span{ opacity:1; transform:scale(1,1); -ms-transform:scale(1,1); -webkit-transform:scale(1,1); }/*===== Icon Left =====*/ .xoverlay .x-icon-left span{ opacity:0; transform:translateX(-500%); -ms-transform:translateX(-500%); -webkit-transform:translateX(-500%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-left span{ opacity:1; transform:translateX(0%); -ms-transform:translateX(0%); -webkit-transform:translateX(0%); }/*===== Icon Right =====*/ .xoverlay .x-icon-right span{ opacity:0; transform:translateX(300%); -ms-transform:translateX(300%); -webkit-transform:translateX(300%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-right span{ opacity:1; transform:translateX(0%); -ms-transform:translateX(0%); -webkit-transform:translateX(0%); }/*===== Icon Top =====*/ .xoverlay .x-icon-top span{ opacity:0; transform:translateY(-500%); -ms-transform:translateY(-500%); -webkit-transform:translateY(-500%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-top span{ opacity:1; transform:translateY(0%); -ms-transform:translateY(0%); -webkit-transform:translateY(0%); }/*===== Icon Bottom =====*/ .xoverlay .x-icon-bottom span{ opacity:0; transform:translateY(300%); -ms-transform:translateY(300%); -webkit-transform:translateY(300%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-bottom span{ opacity:1; transform:translateY(0%); -ms-transform:translateY(0%); -webkit-transform:translateY(0%); }/*===== Slide Up Icon zoom =====*/ .xoverlay .x-icon-zoomup span:nth-of-type(1){ transform:scale(0,0) translateY(300%); -ms-transform:scale(0,0) translateX(300%); -webkit-transform:scale(0,0) translateX(300%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-zoomup span:nth-of-type(1){ transform:scale(1,1) translateX(0%); -ms-transform:scale(1,1) translateX(0%); -webkit-transform:scale(1,1) translateX(0%); }.xoverlay .x-icon-zoomup span:nth-of-type(2){ transform:scale(2,2); -ms-transform:scale(2,2); -webkit-transform:scale(2,2); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-zoomup span:nth-of-type(2){ transform:scale(1,1); -ms-transform:scale(1,1); -webkit-transform:scale(1,1); }.xoverlay .x-icon-zoomup span:nth-of-type(3){ transform:scale(0,0) translateY(300%); -ms-transform:scale(0,0) translateX(300%); -webkit-transform:scale(0,0) translateX(300%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-zoomup span:nth-of-type(3){ transform:scale(1,1) translateX(0%); -ms-transform:scale(1,1) translateX(0%); -webkit-transform:scale(1,1) translateX(0%); }/*===== Slide Down Icon zoom =====*/ .xoverlay .x-icon-zoomdown span:nth-of-type(1){ transform:scale(0,0) translateY(-500%); -ms-transform:scale(0,0) translateX(-500%); -webkit-transform:scale(0,0) translateX(-500%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-zoomdown span:nth-of-type(1){ transform:scale(1,1) translateX(0%); -ms-transform:scale(1,1) translateX(0%); -webkit-transform:scale(1,1) translateX(0%); }.xoverlay .x-icon-zoomdown span:nth-of-type(2){ transform:scale(2,2); -ms-transform:scale(2,2); -webkit-transform:scale(2,2); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-zoomdown span:nth-of-type(2){ transform:scale(1,1); -ms-transform:scale(1,1); -webkit-transform:scale(1,1); }.xoverlay .x-icon-zoomdown span:nth-of-type(3){ transform:scale(0,0) translateY(-500%); -ms-transform:scale(0,0) translateX(-500%); -webkit-transform:scale(0,0) translateX(-500%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-zoomdown span:nth-of-type(3){ transform:scale(1,1) translateX(0%); -ms-transform:scale(1,1) translateX(0%); -webkit-transform:scale(1,1) translateX(0%); }/*===== Icon Rotate Zoom =====*/ .xoverlay .x-icon-rotatezoom span{ opacity:0; transform:scale(0,0) rotate(180deg); -ms-transform:scale(0,0) rotate(180deg); -webkit-transform:scale(0,0) rotate(180deg); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-rotatezoom span{ opacity:1; transform:scale(1,1) rotate(0deg); -ms-transform:scale(1,1) rotate(0deg); -webkit-transform:scale(1,1) rotate(0deg); }/*===== Icon Zoom Out To In =====*/ .xoverlay .x-icon-zoomoutin span:nth-of-type(1){ transform:scale(2,2); -ms-transform:scale(2,2); -webkit-transform:scale(2,2); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-zoomoutin span:nth-of-type(1){ transform:scale(1,1); -ms-transform:scale(1,1); -webkit-transform:scale(1,1); }.xoverlay .x-icon-zoomoutin span:nth-of-type(2){ transform:scale(2,2); -ms-transform:scale(2,2); -webkit-transform:scale(2,2); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-zoomoutin span:nth-of-type(2){ transform:scale(1,1); -ms-transform:scale(1,1); -webkit-transform:scale(1,1); }.xoverlay .x-icon-zoomoutin span:nth-of-type(3){ transform:scale(2,2); -ms-transform:scale(2,2); -webkit-transform:scale(2,2); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-zoomoutin span:nth-of-type(3){ transform:scale(1,1); -ms-transform:scale(1,1); -webkit-transform:scale(1,1); }/*===== Icon All Rotate Zoom In =====*/ .xoverlay .x-icon-allzoomin{ transform:scale(0,0) rotate(180deg); -ms-transform:scale(0,0) rotate(180deg); -webkit-transform:scale(0,0) rotate(180deg); -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } .xoverlay:hover .x-icon-allzoomin{ transform:scale(1,1) rotate(0deg); -ms-transform:scale(1,1) rotate(0deg); -webkit-transform:scale(1,1) rotate(0deg); }/*===== Icon All Rotate Zoom Out =====*/ .xoverlay .x-icon-allzoomout{ transform:scale(2,2) rotate(180deg); -ms-transform:scale(2,2) rotate(180deg); -webkit-transform:scale(2,2) rotate(180deg); -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } .xoverlay:hover .x-icon-allzoomout{ transform:scale(1,1) rotate(0deg); -ms-transform:scale(1,1) rotate(0deg); -webkit-transform:scale(1,1) rotate(0deg); }/*===== Slide Icon Left Top Right =====*/ .xoverlay .x-icon-left-top-right span:nth-of-type(1){ opacity:0; transform:translateX(-500%); -ms-transform:translateX(-500%); -webkit-transform:translateX(-500%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-left-top-right span:nth-of-type(1){ opacity:1; transform:translateX(0%); -ms-transform:translateX(0%); -webkit-transform:translateX(0%); }.xoverlay .x-icon-left-top-right span:nth-of-type(2){ opacity:0; transform:translateY(-500%); -ms-transform:translateY(-500%); -webkit-transform:translateY(-500%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-left-top-right span:nth-of-type(2){ opacity:1; transform:translateY(0%); -ms-transform:translateY(0%); -webkit-transform:translateY(0%); }.xoverlay .x-icon-left-top-right span:nth-of-type(3){ opacity:0; transform:translateX(300%); -ms-transform:translateX(300%); -webkit-transform:translateX(300%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-left-top-right span:nth-of-type(3){ opacity:1; transform:translateY(0%); -ms-transform:translateY(0%); -webkit-transform:translateY(0%); }/*===== Slide Icon Left Bottom Right =====*/ .xoverlay .x-icon-left-bottom-right span:nth-of-type(1){ opacity:0; transform:translateX(-500%); -ms-transform:translateX(-500%); -webkit-transform:translateX(-500%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-left-bottom-right span:nth-of-type(1){ opacity:1; transform:translateX(0%); -ms-transform:translateX(0%); -webkit-transform:translateX(0%); }.xoverlay .x-icon-left-bottom-right span:nth-of-type(2){ opacity:0; transform:translateY(300%); -ms-transform:translateY(300%); -webkit-transform:translateY(300%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-left-bottom-right span:nth-of-type(2){ opacity:1; transform:translateY(0%); -ms-transform:translateY(0%); -webkit-transform:translateY(0%); }.xoverlay .x-icon-left-bottom-right span:nth-of-type(3){ opacity:0; transform:translateX(300%); -ms-transform:translateX(300%); -webkit-transform:translateX(300%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-left-bottom-right span:nth-of-type(3){ opacity:1; transform:translateY(0%); -ms-transform:translateY(0%); -webkit-transform:translateY(0%); }/*===== Flip Icon ZoomIn Individual =====*/ .xoverlay .x-icon-flip-zoomind span:nth-of-type(1){ transform:scale(0,0) rotateX(360deg); -ms-transform:scale(0,0) rotateX(360deg); -webkit-transform:scale(0,0) rotateX(360deg); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-flip-zoomind span:nth-of-type(1){ transform:scale(1,1) rotateX(0deg); -ms-transform:scale(1,1) rotateX(0deg); -webkit-transform:scale(1,1) rotateX(0deg); }.xoverlay .x-icon-flip-zoomind span:nth-of-type(2){ transform:scale(2,2) rotateX(360deg); -ms-transform:scale(2,2) rotateX(360deg); -webkit-transform:scale(2,2) rotateX(360deg); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-flip-zoomind span:nth-of-type(2){ transform:scale(1,1) rotateX(0deg); -ms-transform:scale(1,1) rotateX(0deg); -webkit-transform:scale(1,1) rotateX(0deg); }.xoverlay .x-icon-flip-zoomind span:nth-of-type(3){ transform:scale(0,0) rotateX(360deg); -ms-transform:scale(0,0) rotateX(360deg); -webkit-transform:scale(0,0) rotateX(360deg); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-flip-zoomind span:nth-of-type(3){ transform:scale(1,1) rotateX(0deg); -ms-transform:scale(1,1) rotateX(0deg); -webkit-transform:scale(1,1) rotateX(0deg); }/*===== Flip Icon Zoom Individual 2 =====*/ .xoverlay .x-icon-flip-zoomind2 span:nth-of-type(1){ transform:scale(2,2) rotateX(360deg); -ms-transform:scale(2,2) rotateX(360deg); -webkit-transform:scale(2,2) rotateX(360deg); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-flip-zoomind2 span:nth-of-type(1){ transform:scale(1,1) rotateX(0deg); -ms-transform:scale(1,1) rotateX(0deg); -webkit-transform:scale(1,1) rotateX(0deg); }.xoverlay .x-icon-flip-zoomind2 span:nth-of-type(2){ transform:scale(0,0) rotateX(360deg); -ms-transform:scale(0,0) rotateX(360deg); -webkit-transform:scale(0,0) rotateX(360deg); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-flip-zoomind2 span:nth-of-type(2){ transform:scale(1,1) rotateX(0deg); -ms-transform:scale(1,1) rotateX(0deg); -webkit-transform:scale(1,1) rotateX(0deg); }.xoverlay .x-icon-flip-zoomind2 span:nth-of-type(3){ transform:scale(2,2) rotateX(360deg); -ms-transform:scale(2,2) rotateX(360deg); -webkit-transform:scale(2,2) rotateX(360deg); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-flip-zoomind2 span:nth-of-type(3){ transform:scale(1,1) rotateX(0deg); -ms-transform:scale(1,1) rotateX(0deg); -webkit-transform:scale(1,1) rotateX(0deg); }/*===== Icon All Slide Down =====*/ .xoverlay .x-icon-all-slidedown{ transform:translateY(-100%) rotate(180deg); -ms-transform:translateY(-100%) rotate(180deg); -webkit-transform:translateY(-100%) rotate(180deg); -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } .xoverlay:hover .x-icon-all-slidedown{ transform:translateY(0%) rotate(0deg); -ms-transform:translateY(0%) rotate(0deg); -webkit-transform:translateY(0%) rotate(0deg); }/*===== Icon All Slide Top =====*/ .xoverlay .x-icon-all-slidetop{ transform:translateY(100%) rotate(180deg); -ms-transform:translateY(100%) rotate(180deg); -webkit-transform:translateY(100%) rotate(180deg); -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } .xoverlay:hover .x-icon-all-slidetop{ transform:translateY(0%) rotate(0deg); -ms-transform:translateY(0%) rotate(0deg); -webkit-transform:translateY(0%) rotate(0deg); }/*===== Icon All Slide Left =====*/ .xoverlay .x-icon-all-slideleft{ transform:translateX(-100%) rotate(180deg); -ms-transform:translateX(-100%) rotate(180deg); -webkit-transform:translateX(-100%) rotate(180deg); -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } .xoverlay:hover .x-icon-all-slideleft{ transform:translateX(0%) rotate(0deg); -ms-transform:translateX(0%) rotate(0deg); -webkit-transform:translateX(0%) rotate(0deg); }/*===== Icon All Slide Right =====*/ .xoverlay .x-icon-all-slideright{ transform:translateX(100%) rotate(180deg); -ms-transform:translateX(100%) rotate(180deg); -webkit-transform:translateX(100%) rotate(180deg); -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } .xoverlay:hover .x-icon-all-slideright{ transform:translateX(0%) rotate(0deg); -ms-transform:translateX(0%) rotate(0deg); -webkit-transform:translateX(0%) rotate(0deg); }/*===== Zoom Icon Left Right =====*/ .xoverlay .x-icon-lr-zoom span:nth-of-type(1){ opacity:0; transform:scale(2,2); -ms-transform:scale(2,2); -webkit-transform:scale(2,2); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-lr-zoom span:nth-of-type(1){ opacity:1; transform:scale(1,1); -ms-transform:scale(1,1); -webkit-transform:scale(1,1); }.xoverlay .x-icon-lr-zoom span:nth-of-type(2){ opacity:0; transform:scale(0,0); -ms-transform:scale(0,0); -webkit-transform:scale(0,0); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-lr-zoom span:nth-of-type(2){ opacity:1; transform:scale(1,1); -ms-transform:scale(1,1); -webkit-transform:scale(1,1); }.xoverlay .x-icon-lr-zoom span:nth-of-type(3){ opacity:0; transform:scale(2,2); -ms-transform:scale(2,2); -webkit-transform:scale(2,2); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } .xoverlay:hover .x-icon-lr-zoom span:nth-of-type(3){ opacity:1; transform:scale(1,1); -ms-transform:scale(1,1); -webkit-transform:scale(1,1); }