$(main); function main() { var $e = $('#container'); var $photo = $('.photo', $e); var $crop = $('.crop', $e); $e.css('width', $photo.width()); $crop.css('margin-top', -$photo.height()); $e.on('mousemove touchmove', function(e) { $crop.css('width', e.pageX - this.offsetLeft); }); }
<div id="container"> <img class="photo" src="http://placekitten.com/g/400/200" /> <div class="crop"> <img class="overlay" src="http://placekitten.com/400/200" /> </div> </div>
.crop { overflow: hidden; width: 50%; } .photo { vertical-align: bottom; }