<div id="resize" class="resize">
  <div id="resizer" class="img img1"><img src="https://www.pmob.co.uk/temp2/images/a1-flat.jpg" width="500" height="361" alt="A1"></div>
  <div class="img img2"><img src="https://www.pmob.co.uk/temp2/images/a1-red.jpg" width="500" height="361" alt="A1"></div>
</div>

body {background:#000}
.resize img {
	display:block;
	height:auto;
}
.resize {
	width:500px;/* image width*/
	margin:50px auto;
	position:relative;
	border:5px solid #fff;
	overflow:hidden;
}
.resize:hover{cursor:move;}
.img1{
	position:relative;
	z-index:2;
	width:50%;
	overflow:hidden;
	border-right:1px solid #fff;
}
.img2 {
	position:absolute;
	right:0;
	left:0;
	top:0;
	bottom:0;
	z-index:1;
}
@media screen and (max-width:520px) {
	.resize {width:320px;}
	.img img {width:320px;}
}

//requires jquery
    $('#resize').mousemove(function(e){
        var x = e.pageX - this.offsetLeft;
        $('#resizer').css( "width", x )
    });