<figure class="cImg-image-container"><img src="Ваше изображение ПОСЛЕ" alt="Original Image">
<span class="cImg-image-label" data-type="original">Posle</span>
<div class="cImg-resize-img">
<img src="Ваше изображение ДО" alt="Modified Image">
<span class="cImg-image-label" data-type="modified">Do</span>
</div>
<span class="cImg-handler"></span>
</figure>

max-width: 100%;
}
.cImg-image-container {
position: relative;
width: 100%;
max-width: 640px;
margin: 0;
}
.cImg-image-container img {
display: block;
}
.cImg-image-label {
position: absolute;
bottom: 0;
right: 0;
color: #ffffff;
padding: 1em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
opacity: 0;
-webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s;
-moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s;
transition: transform 0.3s 0.7s, opacity 0.3s 0.7s;
}
.cImg-image-label.is-hidden {
visibility: hidden;
}
.is-visible .cImg-image-label {
opacity: 1;
-webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);}
.cImg-resize-img {
position: absolute;
top: 0;
left: 0;
width:0;
height: 100%;
overflow: hidden;
-webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cImg-resize-img img {
position: relative;
left: 0;
top: 0;
display: block;
height: 100%;
width: auto;
max-width: none;
}
.cImg-resize-img .cImg-image-label {
right: auto;
left: 0;
}
.is-visible .cImg-resize-img {
width: 50%;
-webkit-animation: cImg-bounce-in 0.7s;
-moz-animation: cImg-bounce-in 0.7s;
animation: cImg-bounce-in 0.7s;
}
@-webkit-keyframes cImg-bounce-in {
0% {
width: 0;
}
60% {
width: 55%;
}
100% {
width: 50%;
}
}
@-moz-keyframes cImg-bounce-in {
0% {
width: 0;
}
60% {
width: 55%;
}
100% {
width: 50%;
}
}
@keyframes cImg-bounce-in {
0% {
width: 0;
}
60% {
width: 55%;
}
100% {
width: 50%;
}
}
.cImg-handler {
position: absolute;
height: 44px;
width: 44px;
/* center the element */
left: 50%;
top: 50%;
margin-left: -22px;
margin-top: -22px;
border-radius: 50%;
background: #dc717d url("/icon/arrows.svg") no-repeat center center; cursor: move;
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); opacity: 0;
-webkit-transform: translate3d(0, 0, 0) scale(0); -moz-transform: translate3d(0, 0, 0) scale(0); -ms-transform: translate3d(0, 0, 0) scale(0); -o-transform: translate3d(0, 0, 0) scale(0); transform: translate3d(0, 0, 0) scale(0);}
.cImg-handler.draggable {
background-color: #445b7c;
}
.is-visible .cImg-handler {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) scale(1); -moz-transform: translate3d(0, 0, 0) scale(1); -ms-transform: translate3d(0, 0, 0) scale(1); -o-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s;
-moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s;
transition: transform 0.3s 0.7s, opacity 0s 0.7s; }

<script>jQuery(document).ready(function($){ //check if the .cImg-image-container is in the viewport        
//if yes, animate it
checkPosition($('.cImg-image-container')); $(window).on('scroll', function(){ checkPosition($('.cImg-image-container')); });
//make the .cImg-handler element draggable and modify .cImg-resize-img width according to its position
$('.cImg-image-container').each(function(){ var actual = $(this);
drags(actual.find('.cImg-handler'), actual.find('.cImg-resize-img'), actual, actual.find('.cImg-image-label[data-type="original"]'), actual.find('.cImg-image-label[data-type="modified"]')); });
//upadate images label visibility
$(window).on('resize', function(){ $('.cImg-image-container').each(function(){ var actual = $(this);
updateLabel(actual.find('.cImg-image-label[data-type="modified"]'), actual.find('.cImg-resize-img'), 'left'); updateLabel(actual.find('.cImg-image-label[data-type="original"]'), actual.find('.cImg-resize-img'), 'right'); });
});
});
function checkPosition(container) { container.each(function(){ var actualContainer = $(this);
if( $(window).scrollTop() + $(window).height()*0.5 > actualContainer.offset().top) { actualContainer.addClass('is-visible'); }
});
}
//
function drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) { dragElement.on("mousedown vmousedown", function(e) { dragElement.addClass('draggable'); resizeElement.addClass('resizable'); var dragWidth = dragElement.outerWidth(), xPosition = dragElement.offset().left + dragWidth - e.pageX, containerOffset = container.offset().left, containerWidth = container.outerWidth(), minLeft = containerOffset + 10,
maxLeft = containerOffset + containerWidth - dragWidth - 10;
dragElement.parents().on("mousemove vmousemove", function(e) { leftValue = e.pageX + xPosition - dragWidth;
//constrain the draggable element to move inside his container
if(leftValue < minLeft ) {
leftValue = minLeft;
} else if ( leftValue > maxLeft) {
leftValue = maxLeft;
}
widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%';
$('.draggable').css('left', widthValue).on("mouseup vmouseup", function() { $(this).removeClass('draggable'); resizeElement.removeClass('resizable'); });
$('.resizable').css('width', widthValue); updateLabel(labelResizeElement, resizeElement, 'left'); updateLabel(labelContainer, resizeElement, 'right');        
}).on("mouseup vmouseup", function(e){ dragElement.removeClass('draggable'); resizeElement.removeClass('resizable'); });
e.preventDefault(); }).on("mouseup vmouseup", function(e) { dragElement.removeClass('draggable'); resizeElement.removeClass('resizable'); });
}
function updateLabel(label, resizeElement, position) { if(position == 'left') {
( label.offset().left + label.outerWidth() < resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ; } else {
( label.offset().left > resizeElement.offset().left + resizeElement.outerWidth() ) ? label.removeClass('is-hidden') : label.addClass('is-hidden') ; }
}
</script>