.image {
--image-transition-duration: 0.66s;
--image-transition-easing: cubic-bezier( 0.87, 0, 0.13, 1 );
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.image[data-orientation="landscape"] {
--ratio: 1.5 !important;
--padding-top: calc( 100% / var( --ratio ) ) !important;
}
.image[data-orientation="portrait"] {
--ratio: 0.75 !important;
--padding-top: calc( 100% / var( --ratio ) ) !important;
}
.image[data-orientation="square"] {
--ratio: 1 !important;
--padding-top: calc( 100% / var( --ratio ) ) !important;
}
.image-inner {
overflow: hidden;
position: relative; padding-top: var( --padding-top );
} .image__markup {
overflow: hidden;
position: relative;
padding-top: var( --padding-top );
}
.image__markup img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.image__caption {
margin-top: calc( 1em * var( --line-height ) );
}
[class*="image-layer-"] {
transition: all var( --image-transition-duration ) var( --image-transition-easing );
}
.image-layer-3,
.image-layer-2,
.image-layer-1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 30;
}
.image-layer-2 {
z-index: 20;
}
.image-layer-1 { z-index: 10;
}
.image.hovered .image-layer-3,
.image.hovered-from-left .image-layer-3 {
left: 50%;
}
.image.hovered .image-layer-2,
.image.hovered-from-left .image-layer-2 {
left: 16.6666666666%;
}
.image.hovered-from-right .image-layer-3 {
left: -50%;
}
.image.hovered-from-right .image-layer-2 {
left: -16.6666666666%;
}
.image.hovered-from-top .image-layer-3 {
top: 50%;
}
.image.hovered-from-top .image-layer-2 {
top: 16.6666666666%;
}
.image.hovered-from-bottom .image-layer-3 {
top: -50%;
}
.image.hovered-from-bottom .image-layer-2 {
top: -16.6666666666%;
}