JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

.crop {
    overflow: hidden;
    width: 50%;
}

.photo {
    vertical-align: bottom;
}

JavaScript

$(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);
    });
}