/* Comparison container and img */ .cd-image-container {
position: relative; width: 100%; margin: 0em auto; img { display: block; margin: 0; }
}
.cd-image-label {
position: absolute; bottom: 0; right: 0; color: $color-white; padding: 1em; opacity: 0; @include transform(translateY(20px)); @include transition(transform 0.3s 0.7s, opacity 0.3s 0.7s); .is-hidden { visibility: hidden; }
}
.cd-resize-img {
position: absolute; top: 0; left: 0; width: 0; height: 100%; overflow: hidden; @include transform(translateZ(0)); img { position: absolute; left: 0; top: 0; display: block; height: 100%; width: auto; max-width: none; } .cd-image-label { right: auto; left: 0; }
}
@-webkit-keyframes cd-bounce-in {
0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; }
} @-moz-keyframes cd-bounce-in {
0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; }
} @keyframes cd-bounce-in {
0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; }
}
/* Comparison handle */ .cd-handle {
position: absolute; height: 36px; width: 36px; left: 50%; top: 85%; margin-left: -18px; margin-top: -18px; background: url("/assets/images/cd-arrows.svg") no-repeat center center $color-main; cursor: move; opacity: 0; @include border-radius(50%); @include box-shadow(0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3)); @include transform(translate3d(0, 0, 0) scale(0)); &.draggable { background-color: $color-gray-dark; }
}
.is-visible {
.cd-image-label { opacity: 1; @include transform(translateY(0)); } .cd-resize-img { width: 50%; @include animation(cd-bouce-in .7s); } .cd-handle { opacity: 1; @include transform(translate3d(0, 0, 0) scale(1)); @include transition(transform 0.3s 0.7s, opacity 0s 0.7s); }
}