File "style.css"
Full path: /home/kosmetik/public_html/wp-content/plugins/emage-hover-effects-for-elementor/assets/css/style.css
File
size: 136.43 B
MIME-type: text/plain
Charset: utf-8
Download Open Edit Advanced Editor Back
.imghvr-wrapper {
height: 100%;
}
.imghvr {
height: 100%;
position: relative;
overflow: hidden;
-webkit-mask-image: -webkit-radial-gradient(white, black);
}
.imghvr img {
margin: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
vertical-align: bottom;
}
.elementor-widget-emage_post_grid,
.elementor-widget-emage_post_grid .imghvr,
.elementor-widget-emage_post_grid .elementor-widget-container,
.elementor-widget-emage_post_grid .col-row {
height: 100%;
}
.imghvr-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.imghvr-anim-single, .imghvr-anim-pseudo:before, .imghvr-anim-pseudo:after, .imghvr-anim-pseudo > div:before, .imghvr-anim-pseudo > div:after {
background: rgba(0,0,0,0.3);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.imghvr-anim-pseudo:before,
.imghvr-anim-pseudo:after,
.imghvr-anim-pseudo > div:before,
.imghvr-anim-pseudo > div:after {
content: '';
position: absolute;
}
.imghvr:hover .imghvr-overlay, .imghvr:hover .imghvr-anim-pseudo:before, .imghvr:hover .imghvr-anim-pseudo:after, .imghvr:hover .imghvr-anim-pseudo > div:before, .imghvr:hover .imghvr-anim-pseudo > div:after {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.imghvr-icon, .imghvr-title, .imghvr-subtitle, .imghvr-content {
z-index: 1;
}
.imghvr-icon, .imghvr-title, .imghvr-subtitle, .imghvr-content, .imghvr-button-wrapper {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .55s;
transition-duration: .55s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.imghvr:hover .imghvr-icon, .imghvr:hover .imghvr-title, .imghvr:hover .imghvr-subtitle, .imghvr:hover .imghvr-content, .imghvr:hover .imghvr-button-wrapper {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.imghvr:hover .ih-delay-zero {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr:hover .ih-delay-xs {
-webkit-transition-delay: 0.175s;
transition-delay: 0.175s;
}
.imghvr:hover .ih-delay-sm {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr:hover .ih-delay-md {
-webkit-transition-delay: 0.525s;
transition-delay: 0.525s;
}
.imghvr:hover .ih-delay-lg {
-webkit-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.imghvr:hover .ih-delay-xl {
-webkit-transition-delay: 0.875s;
transition-delay: 0.875s;
}
.imghvr:hover .ih-delay-xxl {
-webkit-transition-delay: 1.05s;
transition-delay: 1.05s;
}
/* content */
.imghvr-content-wrapper {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 2;
padding: 20px;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.imghvr-content-left {
-webkit-box-align: start;
-ms-flex-align: start;
-ms-grid-row-align: flex-start;
align-items: flex-start;
text-align: left;
}
.imghvr-content-right {
-webkit-box-align: end;
-ms-flex-align: end;
-ms-grid-row-align: flex-end;
align-items: flex-end;
text-align: right;
}
.imghvr:hover .imghvr-content-wrapper {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
/* link */
.imghvr-link {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
}
/* buttons */
.imghvr-buttons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
z-index: 3;
}
.imghvr-buttons-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.imghvr-button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: #fff;
color: #222;
font-size: .8em;
padding: 10px 15px;
line-height: normal;
border-radius: 3px;
text-decoration: none !important;
}
.imghvr-buttons-icon-right .imghvr-button i {
margin-right: .3em;
}
.imghvr-buttons-icon-right .imghvr-button i {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
margin-left: .3em;
}
/* no effect */
.imghvr-anim-none {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
/* zoom-in, zoom-out */
.imghvr-anim-zoom-in, .imghvr:hover .imghvr-anim-zoom-out, .imghvr:hover .imghvr-anim-zoom-in-alt {
-webkit-transform: scale(1);
transform: scale(1);
}
.imghvr-anim-zoom-out, .imghvr:hover .imghvr-anim-zoom-in {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.imghvr-anim-zoom-in-alt {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
/* crop */
.imghvr-anim-crop {
opacity: 1;
box-shadow: inset 0 0 0 0 white;
}
.imghvr:hover .imghvr-anim-crop {
box-shadow: inset 0 0 0 25px white;
}
/* grayscale */
.imghvr:hover .imghvr-anim-grayscale {
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /></filter></svg>#filter');
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
/* color */
.imghvr-anim-color {
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /></filter></svg>#filter');
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.imghvr:hover .imghvr-anim-color {
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /></filter></svg>#filter');
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
/* blur */
.imghvr-anim-blur {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.imghvr:hover .imghvr-anim-blur {
-webkit-filter: blur(2px);
filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="2" /></filter></svg>#filter');
filter: blur(2px);
}
/* rotate, scale rotate left, scale rotate right */
.imghvr-anim-rotate {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.imghvr:hover .imghvr-anim-rotate, .imghvr:hover .imghvr-anim-scale-rotate-right {
-webkit-transform: scale(1.3) rotate(5deg);
transform: scale(1.3) rotate(5deg);
}
.imghvr:hover .imghvr-anim-scale-rotate-left {
-webkit-transform: scale(1.3) rotate(-5deg);
transform: scale(1.3) rotate(-5deg);
}
/* move up, move down, move left, move right */
.imghvr-anim-move {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.imghvr-anim-move-up, .imghvr:hover .imghvr-anim-move-down {
-webkit-transform-origin: top;
transform-origin: top;
}
.imghvr-anim-move-down, .imghvr:hover .imghvr-anim-move-up {
-webkit-transform-origin: bottom;
transform-origin: bottom;
}
.imghvr-anim-move-left, .imghvr:hover .imghvr-anim-move-right {
-webkit-transform-origin: left;
transform-origin: left;
}
.imghvr-anim-move-right, .imghvr:hover .imghvr-anim-move-left {
-webkit-transform-origin: right;
transform-origin: right;
}
/* scroll */
.imghvr:hover .imghvr-anim-scroll {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
/* no background */
.imghvr:hover .imghvr-anim-bg-none {
background: none !important;
}
/* slide up, slide-down, slide-left, slide-right, slide top left, slide top right, slide bottom left, slide bottom */
.imghvr:hover .imghvr-anim-slide-out-up,
.imghvr-anim-slide-in-down {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
.imghvr:hover .imghvr-anim-slide-out-down,
.imghvr-anim-slide-in-up {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.imghvr:hover .imghvr-anim-slide-out-left,
.imghvr-anim-slide-in-right {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.imghvr:hover .imghvr-anim-slide-out-right,
.imghvr-anim-slide-in-left {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.imghvr:hover .imghvr-anim-slide-in {
-webkit-transform: translateX(0%) translateY(0%);
transform: translateX(0%) translateY(0%);
}
.imghvr-anim-slide-in {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.imghvr:hover .imghvr-anim-slide-out-top-left,
.imghvr-anim-slide-in-top-left {
-webkit-transform: translateX(-100%) translateY(-100%);
transform: translateX(-100%) translateY(-100%);
}
.imghvr:hover .imghvr-anim-slide-out-top-right,
.imghvr-anim-slide-in-top-right {
-webkit-transform: translateX(100%) translateY(-100%);
transform: translateX(100%) translateY(-100%);
}
.imghvr:hover .imghvr-anim-slide-out-bottom-left,
.imghvr-anim-slide-in-bottom-left {
-webkit-transform: translateX(-100%) translateY(100%);
transform: translateX(-100%) translateY(100%);
}
.imghvr:hover .imghvr-anim-slide-out-bottom-right,
.imghvr-anim-slide-in-bottom-right {
-webkit-transform: translateX(100%) translateY(100%);
transform: translateX(100%) translateY(100%);
}
.imghvr-anim-slide-content {
height: 0;
opacity: 1;
overflow: hidden;
-webkit-transition-property: height;
transition-property: height;
}
.imghvr-anim-slide-content-down {
transform-origin: 100%;
}
/* fade up, fade down, fade left, fade right */
.imghvr-anim-fade-up {
-webkit-transform: translateY(10%);
transform: translateY(10%);
}
.imghvr-anim-fade-down {
-webkit-transform: translateY(-10%);
transform: translateY(-10%);
}
.imghvr-anim-fade-left {
-webkit-transform: translateX(10%);
transform: translateX(10%);
}
.imghvr-anim-fade-right {
-webkit-transform: translateX(-10%);
transform: translateX(-10%);
}
.imghvr:hover .imghvr-anim-fade {
-webkit-transform: translateX(0%) translateY(0%);
transform: translateX(0%) translateY(0%);
}
.imghvr-anim-fade-content-up {
-webkit-transform: translateY(30%);
transform: translateY(30%);
}
.imghvr-anim-fade-content-down {
-webkit-transform: translateY(-30%);
transform: translateY(-30%);
}
.imghvr-anim-fade-content-left {
-webkit-transform: translateX(30%);
transform: translateX(30%);
}
.imghvr-anim-fade-content-right {
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
.imghvr:hover .imghvr-anim-fade-content {
-webkit-transform: translateX(0%) translateY(0%);
transform: translateX(0%) translateY(0%);
}
.imghvr-anim-zoom-content-in {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.imghvr-anim-zoom-content-out {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
.imghvr:hover .imghvr-anim-zoom-content {
-webkit-transform: scale(1);
transform: scale(1);
}
.imghvr-anim-flip-content-x {
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
.imghvr-anim-flip-content-y {
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.imghvr:hover .imghvr-anim-flip-content {
-webkit-transform: rotate(0);
transform: rotate(0);
}
/* hinge up, hinge down, hinge left, hinge right */
.imghvr-perspective {
-webkit-perspective: 50em;
perspective: 50em;
}
.imghvr-anim-hinge-up {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.imghvr-anim-hinge-down {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.imghvr-anim-hinge-left {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.imghvr-anim-hinge-right {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.imghvr:hover .imghvr-anim-hinge, .imghvr-content-wrapper.imghvr-anim-hinge {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.imghvr:hover .imghvr-anim-hinge-up, .imghvr-content-wrapper.imghvr-anim-hinge-up {
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
.imghvr:hover .imghvr-anim-hinge-down, .imghvr-content-wrapper.imghvr-anim-hinge-down {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.imghvr:hover .imghvr-anim-hinge-left, .imghvr-content-wrapper.imghvr-anim-hinge-right {
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.imghvr:hover .imghvr-anim-hinge-right, .imghvr-content-wrapper.imghvr-anim-hinge-left {
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.imghvr:hover .imghvr-content-wrapper.imghvr-anim-hinge {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.imghvr:hover .imghvr-content-wrapper.imghvr-anim-hinge {
-webkit-transform: rotateX(0deg) rotateY(0deg) !important;
transform: rotateX(0deg) rotateY(0deg) !important;
}
/* flip horizontal, flip-vertical, flip diag left, flip diag right */
.imghvr-anim-flip {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 50em;
perspective: 50em;
}
.imghvr:hover .imghvr-anim-flip {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.imghvr:hover .imghvr-content-wrapper.imghvr-anim-flip {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.imghvr:hover .imghvr-anim-flip-hor {
-webkit-transform: rotateX(-180deg);
transform: rotateX(-180deg);
}
.imghvr:hover .imghvr-anim-flip-vert {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.imghvr:hover .imghvr-anim-flip-diag-left {
-webkit-transform: rotate3d(-1, 1, 0, 100deg);
transform: rotate3d(-1, 1, 0, 100deg);
}
.imghvr:hover .imghvr-anim-flip-diag-right {
-webkit-transform: rotate3d(-1, -1, 0, 100deg);
transform: rotate3d(-1, -1, 0, 100deg);
}
.imghvr-content-wrapper.imghvr-anim-flip-hor {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.imghvr:hover .imghvr-content-wrapper.imghvr-anim-flip-hor {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.imghvr-content-wrapper.imghvr-anim-flip-vert {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.imghvr:hover .imghvr-content-wrapper.imghvr-anim-flip-vert {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.imghvr-content-wrapper.imghvr-anim-flip-diag-left {
-webkit-transform: rotate3d(1, -1, 0, 100deg);
transform: rotate3d(1, -1, 0, 100deg);
}
.imghvr:hover .imghvr-content-wrapper.imghvr-anim-flip-diag-left {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
.imghvr-content-wrapper.imghvr-anim-flip-diag-right {
-webkit-transform: rotate3d(1, 1, 0, 100deg);
transform: rotate3d(1, 1, 0, 100deg);
}
.imghvr:hover .imghvr-content-wrapper.imghvr-anim-flip-diag-right {
-webkit-transform: rotate3d(0, 0, 0, 0deg);
transform: rotate3d(0, 0, 0, 0deg);
}
/* shutter out horizontal, shutter out vertical, shutter out diag left, shutter out diag right */
.imghvr-anim-shutter-out {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.imghvr-anim-shutter-out-hor {
left: 50%;
right: 50%;
width: auto;
height: auto;
}
.imghvr:hover .imghvr-anim-shutter-out-hor {
left: 0;
right: 0;
}
.imghvr-anim-shutter-out-vert {
top: 50%;
bottom: 50%;
width: auto;
height: auto;
}
.imghvr:hover .imghvr-anim-shutter-out-vert {
top: 0;
bottom: 0;
}
.imghvr-anim-shutter-out-diag-left {
top: 50%;
bottom: 50%;
left: -35%;
right: -35%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.imghvr:hover .imghvr-anim-shutter-out-diag-left {
top: -35%;
bottom: -35%;
}
.imghvr-anim-shutter-out-diag-right {
top: 50%;
bottom: 50%;
left: -35%;
right: -35%;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.imghvr:hover .imghvr-anim-shutter-out-diag-right {
top: -35%;
bottom: -35%;
}
/* shutter in horizontal, shutter in vertical */
.imghvr-anim-shutter-in-hor:before {
right: 0;
bottom: 0;
width: 0;
height: 100%;
}
.imghvr-anim-shutter-in-hor:after {
top: 0;
left: 0;
width: 0;
height: 100%;
}
.imghvr:hover .imghvr-anim-shutter-in-hor:after, .imghvr:hover .imghvr-anim-shutter-in-hor:before {
width: 50%;
}
.imghvr-anim-shutter-in-vert:before {
right: 0;
bottom: 0;
height: 0;
width: 100%;
}
.imghvr-anim-shutter-in-vert:after {
top: 0;
left: 0;
height: 0;
width: 100%;
}
.imghvr:hover .imghvr-anim-shutter-in-vert:after, .imghvr:hover .imghvr-anim-shutter-in-vert:before {
height: 50%;
}
/* zoom in out, zoom out in */
.imghvr-anim-zoom-out-in, .imghvr-anim-zoom-in-out {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.imghvr-anim-zoom-out-in {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.imghvr:hover .imghvr-anim-zoom-in-out {
animation: zoom-in-out;
-webkit-animation: zoom-in-out;
}
.imghvr:hover .imghvr-anim-zoom-out-in {
animation: zoom-out-in;
-webkit-animation: zoom-out-in;
}
@-webkit-keyframes zoom-in-out {
0% { -webkit-transform: scale(1); transform: scale(1); }
50% { -webkit-transform: scale(1.2); transform: scale(1.2); }
100% { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes zoom-in-out {
0% { -webkit-transform: scale(1); transform: scale(1); }
50% { -webkit-transform: scale(1.2); transform: scale(1.2); }
100% { -webkit-transform: scale(1); transform: scale(1); }
}
@-webkit-keyframes zoom-out-in {
0% { -webkit-transform: scale(1.2); transform: scale(1.2); }
50% { -webkit-transform: scale(1); transform: scale(1); }
100% { -webkit-transform: scale(1.2); transform: scale(1.2); }
}
@keyframes zoom-out-in {
0% { -webkit-transform: scale(1.2); transform: scale(1.2); }
50% { -webkit-transform: scale(1); transform: scale(1); }
100% { -webkit-transform: scale(1.2); transform: scale(1.2); }
}
/* shutter in out horizontal, shutter in out vertical, shutter in out diag left, shutter in out diag right */
.imghvr-anim-shutter-in-out-hor:before,
.imghvr-anim-shutter-in-out-vert:before,
.imghvr-anim-shutter-in-out-diag-left:before,
.imghvr-anim-shutter-in-out-diag-right:before {
right: 0;
bottom: 0;
}
.imghvr-anim-shutter-in-out-hor:after,
.imghvr-anim-shutter-in-out-vert:after,
.imghvr-anim-shutter-in-out-diag-left:after,
.imghvr-anim-shutter-in-out-diag-right:after {
top: 0;
left: 0;
}
.imghvr-anim-shutter-in-out-hor:after,
.imghvr-anim-shutter-in-out-hor:before {
width: 0;
height: 100%;
opacity: 0.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
.imghvr:hover .imghvr-anim-shutter-in-out-hor:before,
.imghvr:hover .imghvr-anim-shutter-in-out-hor:after {
width: 100%;
}
.imghvr-anim-shutter-in-out-vert:after,
.imghvr-anim-shutter-in-out-vert:before {
height: 0;
width: 100%;
opacity: 0.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
.imghvr:hover .imghvr-anim-shutter-in-out-vert:before,
.imghvr:hover .imghvr-anim-shutter-in-out-vert:after {
height: 100%;
}
.imghvr-anim-shutter-in-out-diag-left:after,
.imghvr-anim-shutter-in-out-diag-left:before {
width: 200%;
height: 200%;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
opacity: 0.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
.imghvr-anim-shutter-in-out-diag-left:before {
-webkit-transform: skew(-45deg) translateX(150%);
transform: skew(-45deg) translateX(150%);
}
.imghvr-anim-shutter-in-out-diag-left:after {
-webkit-transform: skew(-45deg) translateX(-150%);
transform: skew(-45deg) translateX(-150%);
}
.imghvr:hover .imghvr-anim-shutter-in-out-diag-left:before {
-webkit-transform: skew(-45deg) translateX(50%);
transform: skew(-45deg) translateX(50%);
}
.imghvr:hover .imghvr-anim-shutter-in-out-diag-left:after {
-webkit-transform: skew(-45deg) translateX(-50%);
transform: skew(-45deg) translateX(-50%);
}
.imghvr-anim-shutter-in-out-diag-right:after,
.imghvr-anim-shutter-in-out-diag-right:before {
width: 200%;
height: 200%;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
opacity: 0.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
.imghvr-anim-shutter-in-out-diag-right:before {
-webkit-transform: skew(45deg) translateX(100%);
transform: skew(45deg) translateX(100%);
}
.imghvr-anim-shutter-in-out-diag-right:after {
-webkit-transform: skew(45deg) translateX(-100%);
transform: skew(45deg) translateX(-100%);
}
.imghvr:hover .imghvr-anim-shutter-in-out-diag-right:before {
-webkit-transform: skew(45deg) translateX(0%);
transform: skew(45deg) translateX(0%);
}
.imghvr:hover .imghvr-anim-shutter-in-out-diag-right:after {
-webkit-transform: skew(45deg) translateX(0%);
transform: skew(45deg) translateX(0%);
}
/* fold up, fold down, fold left, fold right */
.imghvr-anim-fold-up {
-webkit-transform-origin: 49% 0%;
transform-origin: 49% 0%;
}
.imghvr:hover .imghvr-anim-fold-up, .imghvr-content-wrapper.imghvr-anim-fold-up {
-webkit-transform: rotateX(90deg) scale(0.6) translateY(50%);
transform: rotateX(90deg) scale(0.6) translateY(50%);
}
.imghvr:hover .imghvr-content-wrapper.imghvr-anim-fold-up {
-webkit-transform: rotateX(0deg) scale(1) translateY(0%);
transform: rotateX(0deg) scale(1) translateY(0%);
}
.imghvr-anim-fold-down {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.imghvr:hover .imghvr-anim-fold-down, .imghvr-content-wrapper.imghvr-anim-fold-down {
-webkit-transform: rotateX(-90deg) scale(0.6) translateY(-50%);
transform: rotateX(-90deg) scale(0.6) translateY(-50%);
}
.imghvr:hover .imghvr-content-wrapper.imghvr-anim-fold-down {
-webkit-transform: rotateX(0deg) scale(1) translateY(0%);
transform: rotateX(0deg) scale(1) translateY(0%);
}
.imghvr-anim-fold-left {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.imghvr:hover .imghvr-anim-fold-left, .imghvr-content-wrapper.imghvr-anim-fold-left {
-webkit-transform: rotateY(-90deg) scale(0.6) translateX(50%);
transform: rotateY(-90deg) scale(0.6) translateX(50%);
}
.imghvr:hover .imghvr-content-wrapper.imghvr-anim-fold-left {
-webkit-transform: rotateY(0deg) scale(1) translateX(0%);
transform: rotateY(0deg) scale(1) translateX(0%);
}
.imghvr-anim-fold-right {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.imghvr:hover .imghvr-anim-fold-right, .imghvr-content-wrapper.imghvr-anim-fold-right {
-webkit-transform: rotateY(90deg) scale(0.6) translateX(-50%);
transform: rotateY(90deg) scale(0.6) translateX(-50%);
}
.imghvr:hover .imghvr-content-wrapper.imghvr-anim-fold-right {
-webkit-transform: rotateY(0deg) scale(1) translateX(0%);
transform: rotateY(0deg) scale(1) translateX(0%);
}
/* zoom out up, zoom out down, zoom out left, zoom out right */
.imghvr-anim-zoom-out-slide {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.imghvr:hover .imghvr-anim-zoom-out-slide-up {
-webkit-animation: imghvr-zoom-out-slide-up;
animation: imghvr-zoom-out-slide-up;
}
.imghvr:hover .imghvr-anim-zoom-out-slide-down {
-webkit-animation: imghvr-zoom-out-slide-down;
animation: imghvr-zoom-out-slide-down;
}
.imghvr:hover .imghvr-anim-zoom-out-slide-left {
-webkit-animation: imghvr-zoom-out-slide-left;
animation: imghvr-zoom-out-slide-left;
}
.imghvr:hover .imghvr-anim-zoom-out-slide-right {
-webkit-animation: imghvr-zoom-out-slide-right;
animation: imghvr-zoom-out-slide-right;
}
.imghvr:hover .imghvr-anim-zoom-out-slide-up,
.imghvr:hover .imghvr-anim-zoom-out-slide-down,
.imghvr:hover .imghvr-anim-zoom-out-slide-left,
.imghvr:hover .imghvr-anim-zoom-out-slide-right {
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes imghvr-zoom-out-slide-up {
50% { -webkit-transform: scale(1) translateY(0%); transform: scale(1) translateY(0%); }
100% { -webkit-transform: scale(1) translateY(-100%); transform: scale(1) translateY(-100%); }
}
@keyframes imghvr-zoom-out-slide-up {
50% { -webkit-transform: scale(1) translateY(0%); transform: scale(1) translateY(0%); }
100% { -webkit-transform: scale(1) translateY(-100%); transform: scale(1) translateY(-100%); }
}
@-webkit-keyframes imghvr-zoom-out-slide-down {
50% { -webkit-transform: scale(1) translateY(0%); transform: scale(1) translateY(0%); }
100% { -webkit-transform: scale(1) translateY(100%); transform: scale(1) translateY(100%); }
}
@keyframes imghvr-zoom-out-slide-down {
50% { -webkit-transform: scale(1) translateY(0%); transform: scale(1) translateY(0%); }
100% { -webkit-transform: scale(1) translateY(100%); transform: scale(1) translateY(100%); }
}
@-webkit-keyframes imghvr-zoom-out-slide-left {
50% { -webkit-transform: scale(1) translateX(0%); transform: scale(1) translateX(0%); }
100% { -webkit-transform: scale(1) translateX(-100%); transform: scale(1) translateX(-100%); }
}
@keyframes imghvr-zoom-out-slide-left {
50% { -webkit-transform: scale(1) translateX(0%); transform: scale(1) translateX(0%); }
100% { -webkit-transform: scale(1) translateX(-100%); transform: scale(1) translateX(-100%); }
}
@-webkit-keyframes imghvr-zoom-out-slide-right {
50% { -webkit-transform: scale(1) translateX(0%); transform: scale(1) translateX(0%); }
100% { -webkit-transform: scale(1) translateX(100%); transform: scale(1) translateX(100%); }
}
@keyframes imghvr-zoom-out-slide-right {
50% { -webkit-transform: scale(1) translateX(0%); transform: scale(1) translateX(0%); }
100% { -webkit-transform: scale(1) translateX(100%); transform: scale(1) translateX(100%); }
}
/* zoom out flip horizontal, zoom out flip vertical */
.imghvr:hover .imghvr-anim-zoom-out-flip-hor {
-webkit-transform: rotateX(-100deg) translateY(50%) scale(0.5);
transform: rotateX(-100deg) translateY(50%) scale(0.5);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.imghvr:hover .imghvr-anim-zoom-out-flip-vert {
-webkit-transform: rotateY(-100deg) translateX(50%) scale(0.5);
transform: rotateY(-100deg) translateX(50%) scale(0.5);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.imghvr-content-wrapper.imghvr-anim-zoom-in-flip-hor {
-webkit-transform: rotateX(90deg) translateY(-100%) scale(0.5);
transform: rotateX(90deg) translateY(-100%) scale(0.5);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.imghvr:hover .imghvr-content-wrapper.imghvr-anim-zoom-in-flip-hor {
-webkit-transform: rotateX(0) translateY(0%) scale(1);
transform: rotateX(0) translateY(0%) scale(1);
}
.imghvr-content-wrapper.imghvr-anim-zoom-in-flip-vert {
-webkit-transform: rotateY(90deg) translate(50%, 0) scale(0.5);
transform: rotateY(90deg) translate(50%, 0) scale(0.5);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.imghvr:hover .imghvr-content-wrapper.imghvr-anim-zoom-in-flip-vert {
-webkit-transform: rotateY(0) translate(0, 0) scale(1);
transform: rotateY(0) translate(0, 0) scale(1);
}
/* strip shutter up, strip shutter down, strip shutter left, strip shutter right */
.imghvr-anim-strip-shutter-up:before {
top: 0;
}
.imghvr-anim-strip-shutter-up:after {
top: 25%;
-webkit-transition-delay: 0.105s !important;
transition-delay: 0.105s !important;
}
.imghvr-anim-strip-shutter-up:before,
.imghvr-anim-strip-shutter-up:after,
.imghvr-anim-strip-shutter-up > div:before,
.imghvr-anim-strip-shutter-up > div:after {
height: 25%;
width: 100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
left: 0;
}
.imghvr-anim-strip-shutter-up div:before {
top: 50%;
-webkit-transition-delay: 0.21s !important;
transition-delay: 0.21s !important;
}
.imghvr-anim-strip-shutter-up div:after {
top: 75%;
-webkit-transition-delay: 0.35s !important;
transition-delay: 0.35s !important;
}
.imghvr-anim-strip-shutter-down:before, .imghvr-anim-strip-shutter-down:after, .imghvr-anim-strip-shutter-down > div:before, .imghvr-anim-strip-shutter-down > div:after {
height: 25%;
width: 100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
left: 0;
}
.imghvr-anim-strip-shutter-down:before {
top: 0;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-strip-shutter-down:after {
top: 25%;
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-strip-shutter-down > div:before {
top: 50%;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-strip-shutter-down > div:after {
top: 75%;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-strip-shutter-left:before, .imghvr-anim-strip-shutter-left:after, .imghvr-anim-strip-shutter-left > div:before, .imghvr-anim-strip-shutter-left > div:after {
width: 25%;
height: 100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
top: 0;
}
.imghvr-anim-strip-shutter-left:before {
left: 0;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-strip-shutter-left:after {
left: 25%;
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-strip-shutter-left > div:before {
left: 50%;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-strip-shutter-left > div:after {
left: 75%;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-strip-shutter-right:before, .imghvr-anim-strip-shutter-right:after, .imghvr-anim-strip-shutter-right > div:before, .imghvr-anim-strip-shutter-right > div:after {
width: 25%;
height: 100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
top: 0;
}
.imghvr-anim-strip-shutter-right:before {
left: 0;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-strip-shutter-right:after {
left: 25%;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-strip-shutter-right > div:before {
left: 50%;
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-strip-shutter-right > div:after {
left: 75%;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr:hover .imghvr-anim-strip-shutter:before, .imghvr:hover .imghvr-anim-strip-shutter div:before,
.imghvr:hover .imghvr-anim-strip-shutter:after, .imghvr:hover .imghvr-anim-strip-shutter div:after {
-webkit-transform: scale(1);
transform: scale(1);
}
/* strip horizontal up, strip horizontal down, strip horizontal top left, strip horizontal top right, strip horizontal bottom left, strip horizontal bottom right */
.imghvr-anim-strip-hor {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
background: transparent;
}
.imghvr-anim-strip-hor:before,
.imghvr-anim-strip-hor:after,
.imghvr-anim-strip-hor > div:before,
.imghvr-anim-strip-hor > div:after {
height: 25%;
width: 100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
left: 0;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.imghvr:hover .imghvr-anim-strip-hor:before,
.imghvr:hover .imghvr-anim-strip-hor:after,
.imghvr:hover .imghvr-anim-strip-hor > div:before,
.imghvr:hover .imghvr-anim-strip-hor > div:after {
-webkit-transform: scale(1);
transform: scale(1);
}
.imghvr-anim-strip-hor:before {
top: 0;
}
.imghvr-anim-strip-hor:after {
top: 25%;
}
.imghvr-anim-strip-hor > div:before {
top: 50%;
}
.imghvr-anim-strip-hor > div:after {
top: 75%;
}
.imghvr-anim-strip-hor-up:before, .imghvr-anim-strip-hor-up:after, .imghvr-anim-strip-hor-up > div:before, .imghvr-anim-strip-hor-up > div:after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.imghvr-anim-strip-hor-down:before, .imghvr-anim-strip-hor-down:after, .imghvr-anim-strip-hor-down > div:before, .imghvr-anim-strip-hor-down > div:after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.imghvr-anim-strip-hor-top-left:before, .imghvr-anim-strip-hor-top-left:after, .imghvr-anim-strip-hor-top-left > div:before, .imghvr-anim-strip-hor-top-left > div:after {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.imghvr-anim-strip-hor-top-left:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-strip-hor-top-left:after {
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-strip-hor-top-left > div:before {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-strip-hor-top-left > div:after {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-strip-hor-top-right:before, .imghvr-anim-strip-hor-top-right:after, .imghvr-anim-strip-hor-top-right > div:before, .imghvr-anim-strip-hor-top-right > div:after {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.imghvr-anim-strip-hor-top-right:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-strip-hor-top-right:after {
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-strip-hor-top-right > div:before {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-strip-hor-top-right > div:after {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-strip-hor-bottom-left:before, .imghvr-anim-strip-hor-bottom-left:after, .imghvr-anim-strip-hor-bottom-left > div:before, .imghvr-anim-strip-hor-bottom-left > div:after {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.imghvr-anim-strip-hor-bottom-left:before {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-strip-hor-bottom-left:after {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-strip-hor-bottom-left > div:before {
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-strip-hor-bottom-left > div:after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
} .imghvr-anim-strip-hor-bottom-right:before, .imghvr-anim-strip-hor-bottom-right:after, .imghvr-anim-strip-hor-bottom-right > div:before, .imghvr-anim-strip-hor-bottom-right > div:after {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.imghvr-anim-strip-hor-bottom-right:before {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-strip-hor-bottom-right:after {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-strip-hor-bottom-right > div:before {
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-strip-hor-bottom-right > div:after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
/* strip vertical up, strip vertical down, strip vertical top left, strip vertical top right, strip vertical bottom left, strip vertical bottom right */
.imghvr-anim-strip-vert {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
background: transparent;
}
.imghvr-anim-strip-vert:before,
.imghvr-anim-strip-vert:after,
.imghvr-anim-strip-vert > div:before,
.imghvr-anim-strip-vert > div:after {
width: 25%;
height: 100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
top: 0;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.imghvr:hover .imghvr-anim-strip-vert:before,
.imghvr:hover .imghvr-anim-strip-vert:after,
.imghvr:hover .imghvr-anim-strip-vert > div:before,
.imghvr:hover .imghvr-anim-strip-vert > div:after {
-webkit-transform: scale(1);
transform: scale(1);
}
.imghvr-anim-strip-vert:before {
left: 0;
}
.imghvr-anim-strip-vert:after {
left: 25%;
}
.imghvr-anim-strip-vert > div:before {
left: 50%;
}
.imghvr-anim-strip-vert > div:after {
left: 75%;
}
.imghvr-anim-strip-vert-left:before, .imghvr-anim-strip-vert-left:after, .imghvr-anim-strip-vert-left > div:before, .imghvr-anim-strip-vert-left > div:after {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.imghvr-anim-strip-vert-right:before, .imghvr-anim-strip-vert-right:after, .imghvr-anim-strip-vert-right > div:before, .imghvr-anim-strip-vert-right > div:after {
-webkit-transform: scaleY(1);
transform: scaleY(1);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.imghvr-anim-strip-vert-top-left:before, .imghvr-anim-strip-vert-top-left:after, .imghvr-anim-strip-vert-top-left > div:before, .imghvr-anim-strip-vert-top-left > div:after {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.imghvr-anim-strip-vert-top-left:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-strip-vert-top-left:after {
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-strip-vert-top-left > div:before {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-strip-vert-top-left > div:after {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-strip-vert-top-right:before, .imghvr-anim-strip-vert-top-right:after, .imghvr-anim-strip-vert-top-right > div:before, .imghvr-anim-strip-vert-top-right > div:after {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.imghvr-anim-strip-vert-top-right:before {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-strip-vert-top-right:after {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-strip-vert-top-right > div:before {
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-strip-vert-top-right > div:after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-strip-vert-bottom-left:before, .imghvr-anim-strip-vert-bottom-left:after, .imghvr-anim-strip-vert-bottom-left > div:before, .imghvr-anim-strip-vert-bottom-left > div:after {
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.imghvr-anim-strip-vert-bottom-left:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-strip-vert-bottom-left:after {
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-strip-vert-bottom-left > div:before {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-strip-vert-bottom-left > div:after {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-strip-vert-bottom-right:before, .imghvr-anim-strip-vert-bottom-right:after, .imghvr-anim-strip-vert-bottom-right > div:before, .imghvr-anim-strip-vert-bottom-right > div:after {
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.imghvr-anim-strip-vert-bottom-right:before {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-strip-vert-bottom-right:after {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-strip-vert-bottom-right > div:before {
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-strip-vert-bottom-right > div:after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
/* pixel up, pixel down, pixel left, pixel right, pixel top left, pixel top right, pixel bottom left, pixel bottom right */
.imghvr-anim-pixel:before, .imghvr-anim-pixel:after, .imghvr-anim-pixel > div:before, .imghvr-anim-pixel > div:after {
-webkit-transition-timing-function: steps(4);
transition-timing-function: steps(4);
height: 25%;
width: 100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
left: 0;
}
.imghvr-anim-pixel:before {
top: 0;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-pixel:after {
top: 25%;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-pixel > div:before {
top: 50%;
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-pixel > div:after {
top: 75%;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr:hover .imghvr-anim-pixel:before, .imghvr:hover .imghvr-anim-pixel:after, .imghvr:hover .imghvr-anim-pixel > div:before, .imghvr:hover .imghvr-anim-pixel > div:after {
-webkit-transform: scale(1);
transform: scale(1);
}
.imghvr-anim-pixel-up:before, .imghvr-anim-pixel-up:after, .imghvr-anim-pixel-up > div:before, .imghvr-anim-pixel-up > div:after {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.imghvr-anim-pixel-up:before {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-pixel-up:after {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-pixel-up > div:before {
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-pixel-up > div:after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-pixel-down:before, .imghvr-anim-pixel-down:after, .imghvr-anim-pixel-down > div:before, .imghvr-anim-pixel-down > div:after {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.imghvr-anim-pixel-down:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-pixel-down:after {
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-pixel-down > div:before {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-pixel-down > div:after {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-pixel-left:before, .imghvr-anim-pixel-left:after, .imghvr-anim-pixel-left > div:before, .imghvr-anim-pixel-left > div:after {
width: 25%;
height: 100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
top: 0;
}
.imghvr-anim-pixel-left:before {
left: 0;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-pixel-left:after {
left: 25%;
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-pixel-left > div:before {
left: 50%;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-pixel-left > div:after {
left: 75%;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-pixel-right:before, .imghvr-anim-pixel-right:after, .imghvr-anim-pixel-right > div:before, .imghvr-anim-pixel-right > div:after {
width: 25%;
height: 100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
top: 0;
}
.imghvr-anim-pixel-right:before {
left: 0;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-pixel-right:after {
left: 25%;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-pixel-right > div:before {
left: 50%;
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-pixel-right > div:after {
left: 75%;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-pixel-top-left:before, .imghvr-anim-pixel-top-left:after, .imghvr-anim-pixel-top-left > div:before, .imghvr-anim-pixel-top-left > div:after {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.imghvr-anim-pixel-top-left:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-pixel-top-left:after {
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-pixel-top-left > div:before {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-pixel-top-left > div:after {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-pixel-top-right:before, .imghvr-anim-pixel-top-right:after, .imghvr-anim-pixel-top-right > div:before, .imghvr-anim-pixel-top-right > div:after {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.imghvr-anim-pixel-top-right:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-pixel-top-right:after {
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-pixel-top-right > div:before {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-pixel-top-right > div:after {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-pixel-bottom-left:before, .imghvr-anim-pixel-bottom-left:after, .imghvr-anim-pixel-bottom-left > div:before, .imghvr-anim-pixel-bottom-left > div:after {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.imghvr-anim-pixel-bottom-left:before {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-pixel-bottom-left:after {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-pixel-bottom-left > div:before {
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;}
.imghvr-anim-pixel-bottom-left > div:after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-pixel-bottom-right:before, .imghvr-anim-pixel-bottom-right:after, .imghvr-anim-pixel-bottom-right > div:before, .imghvr-anim-pixel-bottom-right > div:after {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.imghvr-anim-pixel-bottom-right:before {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-pixel-bottom-right:after {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-pixel-bottom-right > div:before {
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-pixel-bottom-right > div:after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
/* pivot top left, pivot top right, pivot bottom left, pivot bottom right */
.imghvr-anim-pivot-in {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.imghvr:hover .imghvr-anim-pivot-in {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.imghvr-anim-pivot-in-top-left {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.imghvr-anim-pivot-in-top-right {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.imghvr-anim-pivot-in-bottom-left {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.imghvr-anim-pivot-in-bottom-right {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.imghvr-anim-pivot-out {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.imghvr-anim-pivot-out-top-left {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.imghvr:hover .imghvr-anim-pivot-out-top-left {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.imghvr-anim-pivot-out-top-right {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.imghvr:hover .imghvr-anim-pivot-out-top-right {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.imghvr-anim-pivot-out-bottom-left {
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.imghvr:hover .imghvr-anim-pivot-out-bottom-left {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.imghvr-anim-pivot-out-bottom-right {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.imghvr:hover .imghvr-anim-pivot-out-bottom-right {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
/* rotate around */
.imghvr-anim-rotate-around {
-webkit-animation-name: foolishIn;
animation-name: foolishIn;
}
.imghvr:hover .imghvr-anim-rotate-around {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-animation-name: foolishOut;
animation-name: foolishOut;
}
@-webkit-keyframes foolishIn {
0% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0, 0) rotate(360deg);
transform: scale(0, 0) rotate(360deg);
}
20% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
40% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
60% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
80% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
100% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(1, 1) rotate(0deg);
transform: scale(1, 1) rotate(0deg);
}
}
@keyframes foolishIn {
0% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0, 0) rotate(360deg);
transform: scale(0, 0) rotate(360deg);
}
20% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
40% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
60% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
80% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
100% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(1, 1) rotate(0deg);
transform: scale(1, 1) rotate(0deg);
}
}
@-webkit-keyframes foolishOut {
0% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(1, 1) rotate(360deg);
transform: scale(1, 1) rotate(360deg);
}
20% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
40% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
60% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
80% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
100% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0, 0) rotate(0deg);
transform: scale(0, 0) rotate(0deg);
}
}
@keyframes foolishOut {
0% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(1, 1) rotate(360deg);
transform: scale(1, 1) rotate(360deg);
}
20% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
40% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
60% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
80% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: scale(0.5, 0.5) rotate(0deg);
transform: scale(0.5, 0.5) rotate(0deg);
}
100% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0, 0) rotate(0deg);
transform: scale(0, 0) rotate(0deg);
}
}
/* lightspeed in left, lightspeed in right, lightspeed out left, lightspeed out right */
.imghvr-anim-lightspeed-in-left {
-webkit-transform: translate(100%, 0);
transform: translate(100%, 0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.imghvr:hover .imghvr-anim-lightspeed-in-left {
-webkit-animation: imghvr-lightspeed-in-left 0.4025s ease-in forwards;
animation: imghvr-lightspeed-in-left 0.4025s ease-in forwards;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
@-webkit-keyframes imghvr-lightspeed-in-left {
from {
-webkit-transform: translate(100%, 0) skewX(-20deg);
transform: translate(100%, 0) skewX(-20deg);
}
50% {
-webkit-transform: translate(0, 0) skewX(-20deg);
transform: translate(0, 0) skewX(-20deg);
}
75% {
-webkit-transform: translate(0, 0) skewX(10deg);
transform: translate(0, 0) skewX(10deg);
}
to {
-webkit-transform: translate(0, 0) skewX(0deg);
transform: translate(0, 0) skewX(0deg);
}
}
@keyframes imghvr-lightspeed-in-left {
from {
-webkit-transform: translate(100%, 0) skewX(-20deg);
transform: translate(100%, 0) skewX(-20deg);
}
50% {
-webkit-transform: translate(0, 0) skewX(-20deg);
transform: translate(0, 0) skewX(-20deg);
}
75% {
-webkit-transform: translate(0, 0) skewX(10deg);
transform: translate(0, 0) skewX(10deg);
}
to {
-webkit-transform: translate(0, 0) skewX(0deg);
transform: translate(0, 0) skewX(0deg);
}
}
.imghvr-anim-lightspeed-in-right {
-webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.imghvr:hover .imghvr-anim-lightspeed-in-right{
-webkit-animation: imghvr-lightspeed-in-right 0.4025s ease-in forwards;
animation: imghvr-lightspeed-in-right 0.4025s ease-in forwards;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
@-webkit-keyframes imghvr-lightspeed-in-right {
from {
-webkit-transform: translate(-100%, 0) skewX(20deg);
transform: translate(-100%, 0) skewX(20deg);
}
50% {
-webkit-transform: translate(0, 0) skewX(20deg);
transform: translate(0, 0) skewX(20deg);
}
75% {
-webkit-transform: translate(0, 0) skewX(-10deg);
transform: translate(0, 0) skewX(-10deg);
}
to {
-webkit-transform: translate(0, 0) skewX(0deg);
transform: translate(0, 0) skewX(0deg);
}
}
@keyframes imghvr-lightspeed-in-right {
from {
-webkit-transform: translate(-100%, 0) skewX(20deg);
transform: translate(-100%, 0) skewX(20deg);
}
50% {
-webkit-transform: translate(0, 0) skewX(20deg);
transform: translate(0, 0) skewX(20deg);
}
75% {
-webkit-transform: translate(0, 0) skewX(-10deg);
transform: translate(0, 0) skewX(-10deg);
}
to {
-webkit-transform: translate(0, 0) skewX(0deg);
transform: translate(0, 0) skewX(0deg);
}
}
.imghvr:hover .imghvr-anim-lightspeed-out-left {
-webkit-animation: lightspeed-out-left;
animation: lightspeed-out-left;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.imghvr:hover .imghvr-anim-lightspeed-out-right {
-webkit-animation: lightspeed-out-right;
animation: lightspeed-out-right;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
@-webkit-keyframes lightspeed-out-left {
0% {
-webkit-transform: translate(0, 0) skewX(0deg);
transform: translate(0, 0) skewX(0deg);
}
25% {
-webkit-transform: translate(10%, 0) skewX(0deg);
transform: translate(10%, 0) skewX(0deg);
}
50% {
-webkit-transform: translate(0, 0) skewX(-20deg);
transform: translate(0, 0) skewX(-20deg);
}
100% {
-webkit-transform: translate(-150%, 0) skewX(-20deg);
transform: translate(-150%, 0) skewX(-20deg);
}
}
@keyframes lightspeed-out-left {
0% {
-webkit-transform: translate(0, 0) skewX(0deg);
transform: translate(0, 0) skewX(0deg);
}
25% {
-webkit-transform: translate(10%, 0) skewX(0deg);
transform: translate(10%, 0) skewX(0deg);
}
50% {
-webkit-transform: translate(0, 0) skewX(-20deg);
transform: translate(0, 0) skewX(-20deg);
}
100% {
-webkit-transform: translate(-150%, 0) skewX(-20deg);
transform: translate(-150%, 0) skewX(-20deg);
}
}
@-webkit-keyframes lightspeed-out-right {
0% {
-webkit-transform: translate(0, 0) skewX(0deg);
transform: translate(0, 0) skewX(0deg);
}
25% {
-webkit-transform: translate(-10%, 0) skewX(0deg);
transform: translate(-10%, 0) skewX(0deg);
}
50% {
-webkit-transform: translate(0, 0) skewX(20deg);
transform: translate(0, 0) skewX(20deg);
}
100% {
-webkit-transform: translate(150%, 0) skewX(20deg);
transform: translate(150%, 0) skewX(20deg);
}
}
@keyframes lightspeed-out-right {
0% {
-webkit-transform: translate(0, 0) skewX(0deg);
transform: translate(0, 0) skewX(0deg);
}
25% {
-webkit-transform: translate(-10%, 0) skewX(0deg);
transform: translate(-10%, 0) skewX(0deg);
}
50% {
-webkit-transform: translate(0, 0) skewX(20deg);
transform: translate(0, 0) skewX(20deg);
}
100% {
-webkit-transform: translate(150%, 0) skewX(20deg);
transform: translate(150%, 0) skewX(20deg);
}
}
/* fall way horizontal, fall away vertical, fall away rotate, fall away rotate invert */
.imghvr:hover .imghvr-anim-fall-away-horizontal {
-webkit-transform: rotateX(-360deg) scale(0.2);
transform: rotateX(-360deg) scale(0.2);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.imghvr:hover .imghvr-anim-fall-away-vertical {
-webkit-transform: rotateY(-360deg) scale(0.2);
transform: rotateY(-360deg) scale(0.2);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.imghvr:hover .imghvr-anim-fall-away-rotate {
-webkit-transform: rotate(360deg) scale(0.2);
transform: rotate(360deg) scale(0.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.imghvr:hover .imghvr-anim-fall-away-rotate-invert {
-webkit-transform: rotate(-360deg) scale(0.2);
transform: rotate(-360deg) scale(0.2);
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
/* blocks rotate left, blocks rotate right, blocks rotate in left, blocks rotate in right, blocks in, blocks out
blocks float up, blocks float down, blocks float left, blocks float right
blocks zoom top left, blocks zoom top right, blocks zoom bottom left, blocks zoom bottom right */
.imghvr-anim-blocks:before,
.imghvr-anim-blocks:after,
.imghvr-anim-blocks > div:before,
.imghvr-anim-blocks > div:after {
height: 50%;
width: 50%;
}
.imghvr-anim-blocks:before {
top: 0;
right: 0;
}
.imghvr-anim-blocks:after {
bottom: 0;
left: 0;
}
.imghvr-anim-blocks > div:before {
top: 0;
left: 0;
}
.imghvr-anim-blocks > div:after {
bottom: 0;
right: 0;
}
.imghvr:hover .imghvr-anim-blocks:before,
.imghvr:hover .imghvr-anim-blocks:after,
.imghvr:hover .imghvr-anim-blocks > div:before,
.imghvr:hover .imghvr-anim-blocks > div:after {
-webkit-transform: translate(0, 0) scale(1);
transform: translate(0, 0) scale(1);
}
.imghvr:hover .imghvr-anim-blocks > div:before
.imghvr:hover .imghvr-anim-blocks > div:after {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-blocks-rotate-left:before {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.imghvr-anim-blocks-rotate-left:after {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
.imghvr-anim-blocks-rotate-left > div:before {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.imghvr-anim-blocks-rotate-left > div:after {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.imghvr-anim-blocks-rotate-right:before {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.imghvr-anim-blocks-rotate-right:after {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.imghvr-anim-blocks-rotate-right > div:before {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.imghvr-anim-blocks-rotate-right > div:after {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
.imghvr-anim-blocks-rotate-in-left:before {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
.imghvr-anim-blocks-rotate-in-left:after {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.imghvr-anim-blocks-rotate-in-left > div:before {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.imghvr-anim-blocks-rotate-in-left > div:after {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.imghvr-anim-blocks-rotate-in-right:before {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.imghvr-anim-blocks-rotate-in-right:after {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.imghvr-anim-blocks-rotate-in-right > div:before {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
.imghvr-anim-blocks-rotate-in-right > div:after {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.imghvr-anim-blocks-in:before {
-webkit-transform: translate(100%, -100%);
transform: translate(100%, -100%);
}
.imghvr-anim-blocks-in:after {
-webkit-transform: translate(-100%, 100%);
transform: translate(-100%, 100%);
}
.imghvr-anim-blocks-in > div:before {
-webkit-transform: translate(-100%, -100%);
transform: translate(-100%, -100%);
}
.imghvr-anim-blocks-in > div:after {
-webkit-transform: translate(100%, 100%);
transform: translate(100%, 100%);
}
.imghvr-anim-blocks-out:before {
-webkit-transform: translate(-100%, 100%);
transform: translate(-100%, 100%);
}
.imghvr-anim-blocks-out:after {
-webkit-transform: translate(100%, -100%);
transform: translate(100%, -100%);
}
.imghvr-anim-blocks-out > div:before {
-webkit-transform: translate(100%, 100%);
transform: translate(100%, 100%);
}
.imghvr-anim-blocks-out > div:after {
-webkit-transform: translate(-100%, -100%);
transform: translate(-100%, -100%);
}
.imghvr-anim-blocks-float-up:before,
.imghvr-anim-blocks-float-up:after,
.imghvr-anim-blocks-float-up > div:before,
.imghvr-anim-blocks-float-up > div:after {
-webkit-transform: translate(0, 200%);
transform: translate(0, 200%);
}
.imghvr-anim-blocks-float-up:before {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-blocks-float-up:after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-blocks-float-up > div:before {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-blocks-float-up > div:after {
-webkit-transition-delay: 0.14s;
transition-delay: 0.14s;
}
.imghvr:hover .imghvr-anim-blocks-float-up:before {
-webkit-transition-delay: 0.14s;
transition-delay: 0.14s;
}
.imghvr:hover .imghvr-anim-blocks-float-up:after {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr:hover .imghvr-anim-blocks-float-up > div:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr:hover .imghvr-anim-blocks-float-up > div:after {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr:hover .imghvr-anim-blocks-float-up > div * {
-webkit-transition-delay: 0.49s;
transition-delay: 0.49s;
}
.imghvr-anim-blocks-float-down:before,
.imghvr-anim-blocks-float-down:after,
.imghvr-anim-blocks-float-down > div:before,
.imghvr-anim-blocks-float-down > div:after {
-webkit-transform: translate(0, -200%);
transform: translate(0, -200%);
}
.imghvr-anim-blocks-float-down:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-blocks-float-down:after {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-blocks-float-down > div:before {
-webkit-transition-delay: 0.14s;
transition-delay: 0.14s;
}
.imghvr-anim-blocks-float-down > div:after {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr:hover .imghvr-anim-blocks-float-down:before {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr:hover .imghvr-anim-blocks-float-down:after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr:hover .imghvr-anim-blocks-float-down > div:before {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr:hover .imghvr-anim-blocks-float-down > div:after {
-webkit-transition-delay: 0.14s;
transition-delay: 0.14s;
}
.imghvr:hover .imghvr-anim-blocks-float-down > div * {
-webkit-transition-delay: 0.49s;
transition-delay: 0.49s;
}
.imghvr-anim-blocks-float-left:before,
.imghvr-anim-blocks-float-left:after,
.imghvr-anim-blocks-float-left > div:before,
.imghvr-anim-blocks-float-left > div:after {
-webkit-transform: translate(200%, 0);
transform: translate(200%, 0);
}
.imghvr-anim-blocks-float-left:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-blocks-float-left:after {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-blocks-float-left > div:before {
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-blocks-float-left > div:after {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr:hover .imghvr-anim-blocks-float-left:before {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr:hover .imghvr-anim-blocks-float-left:after {
-webkit-transition-delay: 0.14s;
transition-delay: 0.14s;
}
.imghvr:hover .imghvr-anim-blocks-float-left > div:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr:hover .imghvr-anim-blocks-float-left > div:after {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr:hover .imghvr-anim-blocks-float-left > div * {
-webkit-transition-delay: 0.49s;
transition-delay: 0.49s;
}
.imghvr-anim-blocks-float-right:before,
.imghvr-anim-blocks-float-right:after,
.imghvr-anim-blocks-float-right > div:before,
.imghvr-anim-blocks-float-right > div:after {
-webkit-transform: translate(-200%, 0);
transform: translate(-200%, 0);
}
.imghvr-anim-blocks-float-right:before {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-blocks-float-right:after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-blocks-float-right > div:before {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-blocks-float-right > div:after {
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr:hover .imghvr-anim-blocks-float-right:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr:hover .imghvr-anim-blocks-float-right:after {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr:hover .imghvr-anim-blocks-float-right > div:before {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr:hover .imghvr-anim-blocks-float-right > div:after {
-webkit-transition-delay: 0.14s;
transition-delay: 0.14s;
}
.imghvr:hover .imghvr-anim-blocks-float-right > div * {
-webkit-transition-delay: 0.49s;
transition-delay: 0.49s;
}
.imghvr-anim-blocks-zoom-top-left:before,
.imghvr-anim-blocks-zoom-top-left:after,
.imghvr-anim-blocks-zoom-top-left > div:before,
.imghvr-anim-blocks-zoom-top-left > div:after {
-webkit-transform: scale(0.05);
transform: scale(0.05);
}
.imghvr:hover .imghvr-anim-blocks-zoom-top-left:before {
-webkit-transition-delay: 0.175s;
transition-delay: 0.175s;
}
.imghvr:hover .imghvr-anim-blocks-zoom-top-left:after {
-webkit-transition-delay: 0.175s;
transition-delay: 0.175s;
}
.imghvr:hover .imghvr-anim-blocks-zoom-top-left > div:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr:hover .imghvr-anim-blocks-zoom-top-left > div:after {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr:hover .imghvr-anim-blocks-zoom-top-left > div * {
-webkit-transition-delay: 0.49s;
transition-delay: 0.49s;
}
.imghvr-anim-blocks-zoom-top-right:before,
.imghvr-anim-blocks-zoom-top-right:after,
.imghvr-anim-blocks-zoom-top-right > div:before,
.imghvr-anim-blocks-zoom-top-right > div:after {
-webkit-transform: scale(0.05);
transform: scale(0.05);
}
.imghvr:hover .imghvr-anim-blocks-zoom-top-right:before {
-webkit-transition-delay: 0, 0s;
transition-delay: 0, 0s;
}
.imghvr:hover .imghvr-anim-blocks-zoom-top-right:after {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr:hover .imghvr-anim-blocks-zoom-top-right > div:before {
-webkit-transition-delay: 0.175s;
transition-delay: 0.175s;
}
.imghvr:hover .imghvr-anim-blocks-zoom-top-right > div:after {
-webkit-transition-delay: 0.175s;
transition-delay: 0.175s;
}
.imghvr:hover .imghvr-anim-blocks-zoom-top-right > div * {
-webkit-transition-delay: 0.49s;
transition-delay: 0.49s;
}
.imghvr-anim-blocks-zoom-bottom-left:before,
.imghvr-anim-blocks-zoom-bottom-left:after,
.imghvr-anim-blocks-zoom-bottom-left > div:before,
.imghvr-anim-blocks-zoom-bottom-left > div:after {
-webkit-transform: scale(0.05);
transform: scale(0.05);
}
.imghvr:hover .imghvr-anim-blocks-zoom-bottom-left:before {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr:hover .imghvr-anim-blocks-zoom-bottom-left:after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr:hover .imghvr-anim-blocks-zoom-bottom-left > div:before {
-webkit-transition-delay: 0.175s;
transition-delay: 0.175s;
}
.imghvr:hover .imghvr-anim-blocks-zoom-bottom-left > div:after {
-webkit-transition-delay: 0.175s;
transition-delay: 0.175s;
}
.imghvr:hover .imghvr-anim-blocks-zoom-bottom-left > div * {
-webkit-transition-delay: 0.49s;
transition-delay: 0.49s;
}
.imghvr-anim-blocks-zoom-bottom-right:before,
.imghvr-anim-blocks-zoom-bottom-right:after,
.imghvr-anim-blocks-zoom-bottom-right > div:before,
.imghvr-anim-blocks-zoom-bottom-right > div:after {
-webkit-transform: scale(0.05);
transform: scale(0.05);
}
.imghvr:hover .imghvr-anim-blocks-zoom-bottom-right:before {
-webkit-transition-delay: 0.175s;
transition-delay: 0.175s;
}
.imghvr:hover .imghvr-anim-blocks-zoom-bottom-right:after {
-webkit-transition-delay: 0.175s;
transition-delay: 0.175s;
}
.imghvr:hover .imghvr-anim-blocks-zoom-bottom-right > div:before {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr:hover .imghvr-anim-blocks-zoom-bottom-right > div:after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr:hover .imghvr-anim-blocks-zoom-bottom-right > div * {
-webkit-transition-delay: 0.49s;
transition-delay: 0.49s;
}
/* throw up, throw down, throw left, throw right */
.imghvr-anim-throw-in {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.imghvr:hover .imghvr-anim-throw-in {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.imghvr-anim-throw-in-up {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.imghvr:hover .imghvr-anim-throw-in-up {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.imghvr-anim-throw-in-down {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
.imghvr:hover .imghvr-anim-throw-in-down {
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.imghvr-anim-throw-in-left {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
.imghvr:hover .imghvr-anim-throw-in-left {
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
.imghvr-anim-throw-in-right {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 0 0%;
transform-origin: 0 0%;
}
.imghvr:hover .imghvr-anim-throw-in-right {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.imghvr-anim-throw-out {
z-index: 2;
-webkit-transform: rotate(0);
transform: rotate(0);
}
.imghvr-anim-throw-out-up {
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
.imghvr:hover .imghvr-anim-throw-out-up {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.imghvr-anim-throw-out-down {
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
.imghvr:hover .imghvr-anim-throw-out-down {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.imghvr-anim-throw-out-left {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.imghvr:hover .imghvr-anim-throw-out-left {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.imghvr-anim-throw-out-right {
-webkit-transform-origin: 0% 0;
transform-origin: 0% 0;
}
.imghvr:hover .imghvr-anim-throw-out-right {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
/* flash top lef, flash top right, flash bottom left, flash bottom right */
.imghvr-anim-flash:before,
.imghvr-anim-flash:after {
opacity: 0.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
top: -50%;
bottom: -50%;
left: -50%;
right: -50%;
}
.imghvr-anim-flash:after {
-webkit-transition-delay: 0.175s;
transition-delay: 0.175s;
}
.imghvr-anim-flash-top-left:before,
.imghvr-anim-flash-top-left:after {
-webkit-transform: rotate(-45deg) translateY(-100%);
transform: rotate(-45deg) translateY(-100%);
}
.imghvr:hover .imghvr-anim-flash-top-left:before {
-webkit-transform: rotate(-45deg) translateY(100%);
transform: rotate(-45deg) translateY(100%);
}
.imghvr:hover .imghvr-anim-flash-top-left:after {
-webkit-transform: rotate(-45deg) translateY(0%);
transform: rotate(-45deg) translateY(0%);
}
.imghvr-anim-flash-top-right:before,
.imghvr-anim-flash-top-right:after {
-webkit-transform: rotate(45deg) translateY(-100%);
transform: rotate(45deg) translateY(-100%);
}
.imghvr:hover .imghvr-anim-flash-top-right:before {
-webkit-transform: rotate(45deg) translateY(100%);
transform: rotate(45deg) translateY(100%);
}
.imghvr:hover .imghvr-anim-flash-top-right:after {
-webkit-transform: rotate(45deg) translateY(0%);
transform: rotate(45deg) translateY(0%);
}
.imghvr-anim-flash-bottom-left:before,
.imghvr-anim-flash-bottom-left:after {
-webkit-transform: rotate(45deg) translateY(100%);
transform: rotate(45deg) translateY(100%);
}
.imghvr:hover .imghvr-anim-flash-bottom-left:before {
-webkit-transform: rotate(45deg) translateY(-100%);
transform: rotate(45deg) translateY(-100%);
}
.imghvr:hover .imghvr-anim-flash-bottom-left:after {
-webkit-transform: rotate(45deg) translateY(0%);
transform: rotate(45deg) translateY(0%);
}
.imghvr-anim-flash-bottom-right:before,
.imghvr-anim-flash-bottom-right:after {
-webkit-transform: rotate(-45deg) translateY(100%);
transform: rotate(-45deg) translateY(100%);
}
.imghvr:hover .imghvr-anim-flash-bottom-right:before {
-webkit-transform: rotate(-45deg) translateY(-100%);
transform: rotate(-45deg) translateY(-100%);
}
.imghvr:hover .imghvr-anim-flash-bottom-right:after {
-webkit-transform: rotate(-45deg) translateY(0%);
transform: rotate(-45deg) translateY(0%);
}
/* splash up, splash down, splash left, splash right */
.imghvr-anim-splash:after {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
width: 40px;
height: 40px;
border-radius: 50%;
}
.imghvr-anim-splash:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(.8);
transform: scale(.8);
border-radius: 50%;
-webkit-transition-delay: 150ms;
transition-delay: 150ms;
}
.imghvr:hover .imghvr-anim-splash:before {
border-radius: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
.imghvr-anim-splash-up:after {
top: 100%;
left: 50%;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
.imghvr:hover .imghvr-anim-splash-up:after {
top: 50%;
-webkit-transform: translate(-20px, -20px);
transform: translate(-20px, -20px);
}
.imghvr-anim-splash-down:after {
bottom: 100%;
left: 50%;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
.imghvr:hover .imghvr-anim-splash-down:after {
bottom: 50%;
-webkit-transform: translate(-20px, 20px);
transform: translate(-20px, 20px);
}
.imghvr-anim-splash-left:after {
top: 50%;
left: 100%;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
.imghvr:hover .imghvr-anim-splash-left:after {
left: 50%;
-webkit-transform: translate(-20px, -20px);
transform: translate(-20px, -20px);
}
.imghvr-anim-splash-right:after {
top: 50%;
right: 100%;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
.imghvr:hover .imghvr-anim-splash-right:after {
right: 50%;
-webkit-transform: translate(20px, -20px);
transform: translate(20px, -20px);
}
/* dive */
.imghvr:hover .imghvr-anim-dive {
-webkit-transform: scale(3);
transform: scale(3);
}
/* cube up, cube down, cube left, cube right */
.imghvr-overflow {
overflow: visible !important;
}
.imghvr-anim-cube-in,
.imghvr-anim-cube-out {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.imghvr-anim-cube-out {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.imghvr-anim-cube-in {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr:hover .imghvr-anim-cube-out {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-cube-in-up {
-webkit-transform: translateY(50%) rotateX(-90deg);
transform: translateY(50%) rotateX(-90deg);
}
.imghvr:hover .imghvr-anim-cube-out-up {
-webkit-transform: translateY(-50%) rotateX(90deg);
transform: translateY(-50%) rotateX(90deg);
}
.imghvr-anim-cube-in-down {
-webkit-transform: translateY(-50%) rotateX(90deg);
transform: translateY(-50%) rotateX(90deg);
}
.imghvr:hover .imghvr-anim-cube-out-down {
-webkit-transform: translateY(50%) rotateX(-90deg);
transform: translateY(50%) rotateX(-90deg);
}
.imghvr-anim-cube-in-left {
-webkit-transform: translateX(-50%) rotateY(-90deg);
transform: translateX(-50%) rotateY(-90deg);
}
.imghvr:hover .imghvr-anim-cube-out-left {
-webkit-transform: translateX(50%) rotateY(90deg);
transform: translateX(50%) rotateY(90deg);
}
.imghvr-anim-cube-in-right {
-webkit-transform: translateX(50%) rotateY(90deg);
transform: translateX(50%) rotateY(90deg);
}
.imghvr:hover .imghvr-anim-cube-out-right {
-webkit-transform: translateX(-50%) rotateY(-90deg);
transform: translateX(-50%) rotateY(-90deg);
}
.imghvr-anim-cube-out-up,
.imghvr-anim-cube-out-down {
-webkit-transform: translateY(0%) rotateX(0deg);
transform: translateY(0%) rotateX(0deg);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.imghvr-anim-cube-out-left,
.imghvr-anim-cube-out-right {
-webkit-transform: translateX(0%) rotateY(0deg);
transform: translateX(0%) rotateY(0deg);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.imghvr:hover .imghvr-anim-cube-in-up,
.imghvr:hover .imghvr-anim-cube-in-down {
-webkit-transform: translateY(0%) rotateX(0deg);
transform: translateY(0%) rotateX(0deg);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.imghvr:hover .imghvr-anim-cube-in-left,
.imghvr:hover .imghvr-anim-cube-in-right {
-webkit-transform: translateX(0%) rotateY(0deg);
transform: translateX(0%) rotateY(0deg);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
/* stack up, stack down, stack left, stack right */
.imghvr-anim-stack {
-webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.imghvr:hover img.imghvr-anim-stack {
-webkit-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.imghvr:hover .imghvr-anim-stack {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.imghvr-anim-stack-up {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.imghvr-anim-stack-down {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
.imghvr-anim-stack-left {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.imghvr-anim-stack-right {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
/* bounce in, bounce in up, bounce in down, bounce in left, bounce in right,
bounce out, bounce out up, bounce out down, bounce out left, bounce out right */
.imghvr-anim-bounce {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.imghvr:hover .imghvr-anim-bounce {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.imghvr-anim-bounce-in {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.imghvr:hover .imghvr-anim-bounce-in {
-webkit-animation: imghvr-bounce-in 0.6s ease-in forwards;
animation: imghvr-bounce-in 0.6s ease-in forwards;
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
@-webkit-keyframes imghvr-bounce-in {
0% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes imghvr-bounce-in {
0% {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.imghvr-anim-bounce-in-up {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.imghvr:hover .imghvr-anim-bounce-in-up {
-webkit-animation: imghvr-bounce-in-up 0.8s ease-in forwards;
animation: imghvr-bounce-in-up 0.8s ease-in forwards;
}
@-webkit-keyframes imghvr-bounce-in-up {
25%,
50%,
80%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(25px);
transform: translateY(25px);
}
65% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
90% {
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
}
@keyframes imghvr-bounce-in-up {
25%,
50%,
80%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(25px);
transform: translateY(25px);
}
65% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
90% {
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
}
.imghvr-anim-bounce-in-down {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
.imghvr:hover .imghvr-anim-bounce-in-down {
-webkit-animation: imghvr-bounce-in-down 0.8s ease-in forwards;
animation: imghvr-bounce-in-down 0.8s ease-in forwards;
}
@-webkit-keyframes imghvr-bounce-in-down {
25%,
50%,
80%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-25px);
transform: translateY(-25px);
}
65% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
90% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
}
@keyframes imghvr-bounce-in-down {
25%,
50%,
80%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-25px);
transform: translateY(-25px);
}
65% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
90% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
}
.imghvr-anim-bounce-in-left {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.imghvr:hover .imghvr-anim-bounce-in-left {
-webkit-animation: imghvr-bounce-in-left 0.8s ease-in forwards;
animation: imghvr-bounce-in-left 0.8s ease-in forwards;
}
@-webkit-keyframes imghvr-bounce-in-left {
25%,
50%,
80%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
40% {
-webkit-transform: translateX(25px);
transform: translateX(25px);
}
65% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
90% {
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
}
@keyframes imghvr-bounce-in-left {
25%,
50%,
80%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
40% {
-webkit-transform: translateX(25px);
transform: translateX(25px);
}
65% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
90% {
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
}
.imghvr-anim-bounce-in-right {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.imghvr:hover .imghvr-anim-bounce-in-right {
-webkit-animation: imghvr-bounce-in-right 0.8s ease-in forwards;
animation: imghvr-bounce-in-right 0.8s ease-in forwards;
}
@-webkit-keyframes imghvr-bounce-in-right {
25%,
50%,
80%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
40% {
-webkit-transform: translateX(-25px);
transform: translateX(-25px);
}
65% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
90% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}
}
@keyframes imghvr-bounce-in-right {
25%,
50%,
80%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
40% {
-webkit-transform: translateX(-25px);
transform: translateX(-25px);
}
65% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
90% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}
}
.imghvr:hover .imghvr-anim-bounce-out {
-webkit-animation: imghvr-bounce-out 0.4025s ease-in forwards;
animation: imghvr-bounce-out 0.4025s ease-in forwards;
}
.imghvr:hover .imghvr-anim-bounce-out {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
@-webkit-keyframes imghvr-bounce-out {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
50%,
55% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
}
@keyframes imghvr-bounce-out {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
50%,
55% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
}
.imghvr:hover .imghvr-anim-bounce-out-up {
-webkit-animation: imghvr-bounce-out-up 0.4025s ease-in forwards;
animation: imghvr-bounce-out-up 0.4025s ease-in forwards;
}
.imghvr:hover .imghvr-anim-bounce-out-up {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
@-webkit-keyframes imghvr-bounce-out-up {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%,
45% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes imghvr-bounce-out-up {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%,
45% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.imghvr:hover .imghvr-anim-bounce-out-down {
-webkit-animation: imghvr-bounce-out-down 0.4025s ease-in forwards;
animation: imghvr-bounce-out-down 0.4025s ease-in forwards;
}
.imghvr:hover .imghvr-anim-bounce-out-down {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
@-webkit-keyframes imghvr-bounce-out-down {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
40%,
45% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes imghvr-bounce-out-down {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
40%,
45% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.imghvr:hover .imghvr-anim-bounce-out-left {
-webkit-animation: imghvr-bounce-out-left 0.4025s ease-in forwards;
animation: imghvr-bounce-out-left 0.4025s ease-in forwards;
}
.imghvr:hover .imghvr-anim-bounce-out-left {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
@-webkit-keyframes imghvr-bounce-out-left {
20% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translate3d(15%, 0, 0);
transform: translate3d(15%, 0, 0);
}
to {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes imghvr-bounce-out-left {
20% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translate3d(15%, 0, 0);
transform: translate3d(15%, 0, 0);
}
to {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.imghvr:hover .imghvr-anim-bounce-out-right {
-webkit-animation: imghvr-bounce-out-right 0.4025s ease-in forwards;
animation: imghvr-bounce-out-right 0.4025s ease-in forwards;
}
.imghvr:hover .imghvr-anim-bounce-out-right {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
@-webkit-keyframes imghvr-bounce-out-right {
20% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translate3d(-15%, 0, 0);
transform: translate3d(-15%, 0, 0);
}
to {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes imghvr-bounce-out-right {
20% {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translate3d(-15%, 0, 0);
transform: translate3d(-15%, 0, 0);
}
to {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
/* shift top left, shift top right, shift bottom left, shift bottom right */
.imghvr:hover .imghvr-anim-shift-top-left {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translate(-10px, -10px);
transform: translate(-10px, -10px);
}
.imghvr:hover .imghvr-anim-shift-top-right {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translate(10px, -10px);
transform: translate(10px, -10px);
}
.imghvr:hover .imghvr-anim-shift-bottom-left {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translate(-10px, 10px);
transform: translate(-10px, 10px);
}
.imghvr:hover .imghvr-anim-shift-bottom-right {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translate(10px, 10px);
transform: translate(10px, 10px);
}
/* circle up, circle down, circle left, circle right,
circle top left, circle top right, circle bottom left, circle bottom right */
.imghvr-anim-circle:before {
top: -25%;
bottom: -25%;
left: -25%;
right: -25%;
border-radius: 50%;
}
.imghvr:hover .imghvr-anim-circle:before {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.imghvr-anim-circle-up:before {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.imghvr-anim-circle-down:before {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
.imghvr-anim-circle-left:before {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.imghvr-anim-circle-right:before {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.imghvr-anim-circle-top-left:before {
-webkit-transform: translate(-100%, -100%);
transform: translate(-100%, -100%);
}
.imghvr-anim-circle-top-right:before {
-webkit-transform: translate(100%, -100%);
transform: translate(100%, -100%);
}
.imghvr-anim-circle-bottom-left:before {
-webkit-transform: translate(-100%, 100%);
transform: translate(-100%, 100%);
}
.imghvr-anim-circle-bottom-right:before {
-webkit-transform: translate(100%, 100%);
transform: translate(100%, 100%);
}
/* book open horizontal, book open vertical */
.imghvr-anim-book:before,
.imghvr-anim-book:after {
z-index: -1;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.imghvr:hover .imghvr-anim-book:before,
.imghvr:hover .imghvr-anim-book:after {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.imghvr-anim-book-open-horiz {
-webkit-perspective: 50em;
perspective: 50em;
}
.imghvr-anim-book-open-horiz {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.imghvr-anim-book-open-horiz:before,
.imghvr-anim-book-open-horiz:after {
height: 100%;
width: 50%;
top: 0;
}
.imghvr-anim-book-open-horiz:before {
background-image: -webkit-linear-gradient( left, transparent 60%, rgba(0, 0, 0, 0.1) 99%, rgba(0, 0, 0, 0.15) 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(60%, transparent), color-stop(99%, rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.15)));
background-image: -webkit-linear-gradient(left, transparent 60%, rgba(0, 0, 0, 0.1) 99%, rgba(0, 0, 0, 0.15) 100%);
background-image: linear-gradient(to right, transparent 60%, rgba(0, 0, 0, 0.1) 99%, rgba(0, 0, 0, 0.15) 100%);
left: 0;
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.imghvr-anim-book-open-horiz:after {
background-image: -webkit-linear-gradient( right, transparent 60%, rgba(0, 0, 0, 0.12) 99%, rgba(0, 0, 0, 0.15) 100%);
background-image: -webkit-gradient(linear, right top, left top, color-stop(60%, transparent), color-stop(99%, rgba(0, 0, 0, 0.12)), to(rgba(0, 0, 0, 0.15)));
background-image: -webkit-linear-gradient(right, transparent 60%, rgba(0, 0, 0, 0.12) 99%, rgba(0, 0, 0, 0.15) 100%);
background-image: linear-gradient(to left, transparent 60%, rgba(0, 0, 0, 0.12) 99%, rgba(0, 0, 0, 0.15) 100%);
right: 0;
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.imghvr:hover .imghvr-anim-book-open-horiz * {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-book-open-vert {
-webkit-perspective: 50em;
perspective: 50em;
}
.imghvr-anim-book-open-vert {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.imghvr-anim-book-open-vert:before,
.imghvr-anim-book-open-vert:after {
height: 50%;
width: 100%;
left: 0;
}
.imghvr-anim-book-open-vert:before {
background-image: -webkit-linear-gradient( top, transparent 60%, rgba(0, 0, 0, 0.1) 99%, rgba(0, 0, 0, 0.15) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(99%, rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.15)));
background-image: -webkit-linear-gradient(top, transparent 60%, rgba(0, 0, 0, 0.1) 99%, rgba(0, 0, 0, 0.15) 100%);
background-image: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.1) 99%, rgba(0, 0, 0, 0.15) 100%);
top: 0;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.imghvr-anim-book-open-vert:after {
background-image: -webkit-linear-gradient( bottom, transparent 60%, rgba(0, 0, 0, 0.13) 99%, rgba(0, 0, 0, 0.15) 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(60%, transparent), color-stop(99%, rgba(0, 0, 0, 0.13)), to(rgba(0, 0, 0, 0.15)));
background-image: -webkit-linear-gradient(bottom, transparent 60%, rgba(0, 0, 0, 0.13) 99%, rgba(0, 0, 0, 0.15) 100%);
background-image: linear-gradient(to top, transparent 60%, rgba(0, 0, 0, 0.13) 99%, rgba(0, 0, 0, 0.15) 100%);
bottom: 0;
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.imghvr:hover .imghvr-anim-book-open-vert * {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
/* border reveal, border reveal horizontal, border reveal vertical, border reveal diagonal left, border reveal diagnal right,
border reveal top left, border reveal top right, border reveal bottom left, border reveal bottom right,
border reveal clockwise, border reveal anticlockwise, border reveal split clockwise, border reveal split anticlockwise,
border reveal attach clockwise, border reveal attach anticlockwise */
.imghvr-anim-border-reveal:before,
.imghvr-anim-border-reveal:after {
z-index: 1;
height: 4px;
left: 5px;
right: 5px;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
.imghvr-anim-border-reveal:before {
top: 5px;
}
.imghvr-anim-border-reveal:after {
bottom: 5px;
}
.imghvr-anim-border-reveal > div {
z-index: 3;
}
.imghvr-anim-border-reveal > div * {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.imghvr-anim-border-reveal > div:before,
.imghvr-anim-border-reveal > div:after {
z-index: -1;
width: 4px;
top: 5px;
bottom: 5px;
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
.imghvr-anim-border-reveal > div:before {
left: 5px;
}
.imghvr-anim-border-reveal > div:after {
right: 5px;
}
.imghvr:hover .imghvr-anim-border-reveal:before,
.imghvr:hover .imghvr-anim-border-reveal:after,
.imghvr:hover .imghvr-anim-border-reveal > div:before,
.imghvr:hover .imghvr-anim-border-reveal > div:after {
-webkit-transform: scale(1);
transform: scale(1);
}
.imghvr:hover .imghvr-anim-border-reveal > div * {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-border-reveal-vert:before,
.imghvr-anim-border-reveal-vert:after {
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
.imghvr:hover .imghvr-anim-border-reveal-vert:before,
.imghvr:hover .imghvr-anim-border-reveal-vert:after {
-webkit-transition-delay: 0.23333s;
transition-delay: 0.23333s;
}
.imghvr-anim-border-reveal-horiz > div:before,
.imghvr-anim-border-reveal-horiz > div:after {
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
.imghvr:hover .imghvr-anim-border-reveal-horiz > div:before,
.imghvr:hover .imghvr-anim-border-reveal-horiz > div:after {
-webkit-transition-delay: 0.23333s;
transition-delay: 0.23333s;
}
.imghvr-anim-border-reveal-corners-1:before,
.imghvr-anim-border-reveal-corners-1 > div:before {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.imghvr-anim-border-reveal-corners-1:after,
.imghvr-anim-border-reveal-corners-1 > div:after {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.imghvr-anim-border-reveal-corners-2:before,
.imghvr-anim-border-reveal-corners-2 > div:before {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.imghvr-anim-border-reveal-corners-2:after,
.imghvr-anim-border-reveal-corners-2 > div:after {
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.imghvr-anim-border-reveal-top-left:before,
.imghvr-anim-border-reveal-top-left:after,
.imghvr-anim-border-reveal-top-left > div:before,
.imghvr-anim-border-reveal-top-left > div:after {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.imghvr-anim-border-reveal-top-left:before {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.imghvr-anim-border-reveal-top-left:after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-border-reveal-top-left > div:before {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.imghvr-anim-border-reveal-top-left > div:after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr:hover .imghvr-anim-border-reveal-top-left:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr:hover .imghvr-anim-border-reveal-top-left:after {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.imghvr:hover .imghvr-anim-border-reveal-top-left > div:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr:hover .imghvr-anim-border-reveal-top-left > div:after {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.imghvr-anim-border-reveal-top-right:before,
.imghvr-anim-border-reveal-top-right:after,
.imghvr-anim-border-reveal-top-right > div:before,
.imghvr-anim-border-reveal-top-right > div:after {
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
.imghvr-anim-border-reveal-top-right:before {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.imghvr-anim-border-reveal-top-right:after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-border-reveal-top-right > div:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-border-reveal-top-right > div:after {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.imghvr:hover .imghvr-anim-border-reveal-top-right:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr:hover .imghvr-anim-border-reveal-top-right:after {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.imghvr:hover .imghvr-anim-border-reveal-top-right > div:before {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.imghvr:hover .imghvr-anim-border-reveal-top-right > div:after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-border-reveal-bottom-left:before,
.imghvr-anim-border-reveal-bottom-left:after,
.imghvr-anim-border-reveal-bottom-left > div:before,
.imghvr-anim-border-reveal-bottom-left > div:after {
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
.imghvr-anim-border-reveal-bottom-left:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-border-reveal-bottom-left:after {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.imghvr-anim-border-reveal-bottom-left > div:before {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.imghvr-anim-border-reveal-bottom-left > div:after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr:hover .imghvr-anim-border-reveal-bottom-left:before {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.imghvr:hover .imghvr-anim-border-reveal-bottom-left:after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr:hover .imghvr-anim-border-reveal-bottom-left > div:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr:hover .imghvr-anim-border-reveal-bottom-left > div:after {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.imghvr-anim-border-reveal-bottom-right:before,
.imghvr-anim-border-reveal-bottom-right:after,
.imghvr-anim-border-reveal-bottom-right > div:before,
.imghvr-anim-border-reveal-bottom-right > div:after {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.imghvr-anim-border-reveal-bottom-right:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-border-reveal-bottom-right:after {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.imghvr-anim-border-reveal-bottom-right > div:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-border-reveal-bottom-right > div:after {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.imghvr:hover .imghvr-anim-border-reveal-bottom-right:before {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.imghvr:hover .imghvr-anim-border-reveal-bottom-right:after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr:hover .imghvr-anim-border-reveal-bottom-right > div:before {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.imghvr:hover .imghvr-anim-border-reveal-bottom-right > div:after {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-border-reveal-cc-1:before,
.imghvr-anim-border-reveal-cc-1:after,
.imghvr-anim-border-reveal-cc-1 > div:before,
.imghvr-anim-border-reveal-cc-1 > div:after {
-webkit-transition-duration: 0.23333s;
transition-duration: 0.23333s;
}
.imghvr-anim-border-reveal-cc-1:before,
.imghvr-anim-border-reveal-cc-1 > div:after {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.imghvr-anim-border-reveal-cc-1:after,
.imghvr-anim-border-reveal-cc-1 > div:before {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.imghvr-anim-border-reveal-cc-1:before {
-webkit-transition-delay: 0.525s;
transition-delay: 0.525s;
}
.imghvr-anim-border-reveal-cc-1:after {
-webkit-transition-delay: 0.175s;
transition-delay: 0.175s;
}
.imghvr-anim-border-reveal-cc-1 > div:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-border-reveal-cc-1 > div:after {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr:hover .imghvr-anim-border-reveal-cc-1:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr:hover .imghvr-anim-border-reveal-cc-1:after {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr:hover .imghvr-anim-border-reveal-cc-1 > div:before {
-webkit-transition-delay: 0.525s;
transition-delay: 0.525s;
}
.imghvr:hover .imghvr-anim-border-reveal-cc-1 > div:after {
-webkit-transition-delay: 0.175s;
transition-delay: 0.175s;
}
.imghvr-anim-border-reveal-ccc-1:before,
.imghvr-anim-border-reveal-ccc-1:after,
.imghvr-anim-border-reveal-ccc-1 > div:before,
.imghvr-anim-border-reveal-ccc-1 > div:after {
-webkit-transition-duration: 0.23333s;
transition-duration: 0.23333s;
}
.imghvr-anim-border-reveal-ccc-1:before,
.imghvr-anim-border-reveal-ccc-1 > div:after {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.imghvr-anim-border-reveal-ccc-1:after,
.imghvr-anim-border-reveal-ccc-1 > div:before {
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.imghvr-anim-border-reveal-ccc-1:before {
-webkit-transition-delay: 0;
transition-delay: 0;
}
.imghvr-anim-border-reveal-ccc-1:after {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-border-reveal-ccc-1 > div:before {
-webkit-transition-delay: 0.525s;
transition-delay: 0.525s;
}
.imghvr-anim-border-reveal-ccc-1 > div:after {
-webkit-transition-delay: 0.175s;
transition-delay: 0.175s;
}
.imghvr:hover .imghvr-anim-border-reveal-ccc-1:before {
-webkit-transition-delay: 0.525s;
transition-delay: 0.525s;
}
.imghvr:hover .imghvr-anim-border-reveal-ccc-1:after {
-webkit-transition-delay: 0.175s;
transition-delay: 0.175s;
}
.imghvr:hover .imghvr-anim-border-reveal-ccc-1 > div:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr:hover .imghvr-anim-border-reveal-ccc-1 > div:after {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-border-reveal-cc-2:before,
.imghvr-anim-border-reveal-cc-2 > div:after {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.imghvr-anim-border-reveal-cc-2:after,
.imghvr-anim-border-reveal-cc-2 > div:before {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.imghvr-anim-border-reveal-ccc-2:before,
.imghvr-anim-border-reveal-ccc-2 > div:after {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.imghvr-anim-border-reveal-ccc-2:after,
.imghvr-anim-border-reveal-ccc-2 > div:before {
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.imghvr-anim-border-reveal-cc-3:before,
.imghvr-anim-border-reveal-cc-3 > div:after {
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.imghvr-anim-border-reveal-cc-3:after,
.imghvr-anim-border-reveal-cc-3 > div:before {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.imghvr-anim-border-reveal-cc-3:before {
right: 14px;
left: 0;
}
.imghvr-anim-border-reveal-cc-3:after {
left: 14px;
right: 0;
}
.imghvr-anim-border-reveal-cc-3 > div:before {
top: 14px;
bottom: 0;
}
.imghvr-anim-border-reveal-cc-3 > div:after {
bottom: 14px;
top: 0;
}
.imghvr-anim-border-reveal-ccc-3:before,
.imghvr-anim-border-reveal-ccc-3 > div:after {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.imghvr-anim-border-reveal-ccc-3:after,
.imghvr-anim-border-reveal-ccc-3 > div:before {
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.imghvr-anim-border-reveal-ccc-3:before {
left: 14px;
right: 0;
}
.imghvr-anim-border-reveal-ccc-3:after {
right: 14px;
left: 0;
}
.imghvr-anim-border-reveal-ccc-3 > div:before {
bottom: 14px;
top: 0;
}
.imghvr-anim-border-reveal-ccc-3 > div:after {
top: 14px;
bottom: 0;
}
/* blinds horizontal, blinds vertical, blinds up, blinds down, blinds left, blind right */
.imghvr-anim-blinds:before,
.imghvr-anim-blinds:after {
z-index: 2;
}
.imghvr-anim-blinds:before {
top: 0;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-blinds:after {
top: 25%;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-blinds > div {
z-index: 3;
background-color: transparent !important;
}
.imghvr-anim-blinds > div * {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-blinds > div:before,
.imghvr-anim-blinds > div:after {
z-index: -1;
}
.imghvr-anim-blinds a {
z-index: 3;
}
.imghvr:hover .imghvr-anim-blinds:before,
.imghvr:hover .imghvr-anim-blinds:after,
.imghvr:hover .imghvr-anim-blinds > div:before,
.imghvr:hover .imghvr-anim-blinds > div:after {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.imghvr:hover .imghvr-anim-blinds > div * {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transition-delay: 0.4025s;
transition-delay: 0.4025s;
}
.imghvr-anim-blinds-horiz:before,
.imghvr-anim-blinds-horiz:after,
.imghvr-anim-blinds-horiz > div:before,
.imghvr-anim-blinds-horiz > div:after {
height: 25%;
width: 100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
left: 0;
}
.imghvr-anim-blinds-horiz:before {
top: 0;
}
.imghvr-anim-blinds-horiz:after {
top: 25%;
}
.imghvr-anim-blinds-horiz > div:before {
top: 50%;
}
.imghvr-anim-blinds-horiz > div:after {
top: 75%;
}
.imghvr:hover .imghvr-anim-blinds-horiz > div * {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-blinds-vert:before,
.imghvr-anim-blinds-vert:after,
.imghvr-anim-blinds-vert > div:before,
.imghvr-anim-blinds-vert > div:after {
width: 25%;
height: 100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
top: 0;
}
.imghvr-anim-blinds-vert:before {
left: 0;
}
.imghvr-anim-blinds-vert:after {
left: 25%;
}
.imghvr-anim-blinds-vert > div:before {
left: 50%;
}
.imghvr-anim-blinds-vert > div:after {
left: 75%;
}
.imghvr:hover .imghvr-anim-blinds-vert > div * {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-blinds-up:before,
.imghvr-anim-blinds-up:after,
.imghvr-anim-blinds-up > div:before,
.imghvr-anim-blinds-up > div:after {
height: 25%;
width: 100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
left: 0;
}
.imghvr-anim-blinds-up:before {
top: 0;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-blinds-up:after {
top: 25%;
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-blinds-up > div:before {
top: 50%;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-blinds-up > div:after {
top: 75%;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-blinds-down:before,
.imghvr-anim-blinds-down:after,
.imghvr-anim-blinds-down > div:before,
.imghvr-anim-blinds-down > div:after {
height: 25%;
width: 100%;
-webkit-transform: scaleY(0);
transform: scaleY(0);
left: 0;
}
.imghvr-anim-blinds-down:before {
top: 0;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-blinds-down:after {
top: 25%;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-blinds-down > div:before {
top: 50%;
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-blinds-down > div:after {
top: 75%;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-blinds-left:before,
.imghvr-anim-blinds-left:after,
.imghvr-anim-blinds-left > div:before,
.imghvr-anim-blinds-left > div:after {
width: 25%;
height: 100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
top: 0;
}
.imghvr-anim-blinds-left:before {
left: 0;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.imghvr-anim-blinds-left:after {
left: 25%;
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-blinds-left > div:before {
left: 50%;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-blinds-left > div:after {
left: 75%;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-blinds-right:before,
.imghvr-anim-blinds-right:after,
.imghvr-anim-blinds-right > div:before,
.imghvr-anim-blinds-right > div:after {
width: 25%;
height: 100%;
-webkit-transform: scaleX(0);
transform: scaleX(0);
top: 0;
}
.imghvr-anim-blinds-right:before {
left: 0;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.imghvr-anim-blinds-right:after {
left: 25%;
-webkit-transition-delay: 0.105s;
transition-delay: 0.105s;
}
.imghvr-anim-blinds-right > div:before {
left: 50%;
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.imghvr-anim-blinds-right > div:after {
left: 75%;
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
/* resets */
.elementor-element.elementor-widget-emage_hover_effects .imghvr {
background: rgba(0,0,0,0);
}
.elementor-element.elementor-widget-emage_hover_effects .imghvr-title, .elementor-element.elementor-widget-emage_hover_effects .imghvr-subtitle {
/* font-family: 'Mandali', sans-serif; */
/* font-size: 20px; */
color: #fff;
}
.elementor-editor-active .elementor-element.elementor-widget-emage_hover_effects .imghvr {
background: url(../transparent.png);
}
/* post grid */
.imghvr-subtitle .imghvr-meta {
display: inline-flex;
align-items: center;
margin: 0 5px;
}
.imghvr-subtitle .imghvr-meta:first-child {
margin-left: 0;
}
.imghvr-meta svg {
fill: none !important;
height: 1em;
}
.imghvr-cats .imghvr-cat {
position: relative;
display: inline-block;
color: #fff;
background: #ed2d30;
padding: 5px 12px;
font-weight: 600;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 3px;
margin: 5px 8px 0 0;
}
.imghvr-cats .imghvr-cat:last-child {
margin-right: 0
}
.imghvr-cats .imghvr-cat:before {
content: "";
position: absolute;
z-index: 0;
background: #000;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
border-radius: 3px;
transition: opacity .15s;
}
.imghvr-cats .imghvr-cat:hover:before {
opacity: 0.1;
}
/* responsive grid */
.col-row{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
margin-left:-10px;
margin-right:-10px
}
.col-row.disable-cols-gap div[class*="col-desk"]{
padding-left:0;
padding-right:0
}
.col-row.disable-rows-gap div[class*="col-desk"]{
padding-top:0;
padding-bottom:0
}
.col-desk-1,.col-desk-2,.col-desk-3,.col-desk-4,.col-desk-5,.col-desk-6,.col-tab-1,.col-tab-2,.col-tab-3,.col-tab-4,.col-tab-5,.col-tab-6,.col-mob-1,.col-mob-2,.col-mob-3,.col-mob-4,.col-mob-5,.col-mob-6{
position:relative;
min-height:1px;
padding:10px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:100%
}
.col-mob-1{
-webkit-box-flex:0;
-webkit-flex:0 0 100%;
-ms-flex:0 0 100%;
flex:0 0 100%;
max-width:100%
}
.col-mob-2{
-webkit-box-flex:0;
-webkit-flex:0 0 50%;
-ms-flex:0 0 50%;
flex:0 0 50%;
max-width:50%
}
.col-mob-3{
-webkit-box-flex:0;
-webkit-flex:0 0 33.33333%;
-ms-flex:0 0 33.33333%;
flex:0 0 33.33333%;
max-width:33.33333%
}
.col-mob-4{
-webkit-box-flex:0;
-webkit-flex:0 0 25%;
-ms-flex:0 0 25%;
flex:0 0 25%;
max-width:25%
}
.col-mob-5{
-webkit-box-flex:0;
-webkit-flex:0 0 20%;
-ms-flex:0 0 20%;
flex:0 0 20%;
max-width:20%
}
.col-mob-6{
-webkit-box-flex:0;
-webkit-flex:0 0 16.66666%;
-ms-flex:0 0 16.66666%;
flex:0 0 16.66666%;
max-width:16.66666%
}
@media (min-width: 768px){
.col-tab-1{
-webkit-box-flex:0;
-webkit-flex:0 0 100%;
-ms-flex:0 0 100%;
flex:0 0 100%;
max-width:100%
}
.col-tab-2{
-webkit-box-flex:0;
-webkit-flex:0 0 50%;
-ms-flex:0 0 50%;
flex:0 0 50%;
max-width:50%
}
.col-tab-3{
-webkit-box-flex:0;
-webkit-flex:0 0 33.33333%;
-ms-flex:0 0 33.33333%;
flex:0 0 33.33333%;
max-width:33.33333%
}
.col-tab-4{
-webkit-box-flex:0;
-webkit-flex:0 0 25%;
-ms-flex:0 0 25%;
flex:0 0 25%;
max-width:25%
}
.col-tab-5{
-webkit-box-flex:0;
-webkit-flex:0 0 20%;
-ms-flex:0 0 20%;
flex:0 0 20%;
max-width:20%
}
.col-tab-6{
-webkit-box-flex:0;
-webkit-flex:0 0 16.66666%;
-ms-flex:0 0 16.66666%;
flex:0 0 16.66666%;
max-width:16.66666%
}
}
@media (min-width: 1025px){
.col-desk-1{
-webkit-box-flex:0;
-webkit-flex:0 0 100%;
-ms-flex:0 0 100%;
flex:0 0 100%;
max-width:100%
}
.col-desk-2{
-webkit-box-flex:0;
-webkit-flex:0 0 50%;
-ms-flex:0 0 50%;
flex:0 0 50%;
max-width:50%
}
.col-desk-3{
-webkit-box-flex:0;
-webkit-flex:0 0 33.33333%;
-ms-flex:0 0 33.33333%;
flex:0 0 33.33333%;
max-width:33.33333%
}
.col-desk-4{
-webkit-box-flex:0;
-webkit-flex:0 0 25%;
-ms-flex:0 0 25%;
flex:0 0 25%;
max-width:25%
}
.col-desk-5{
-webkit-box-flex:0;
-webkit-flex:0 0 20%;
-ms-flex:0 0 20%;
flex:0 0 20%;
max-width:20%
}
.col-desk-6{
-webkit-box-flex:0;
-webkit-flex:0 0 16.66666%;
-ms-flex:0 0 16.66666%;
flex:0 0 16.66666%;
max-width:16.66666%
}
}