JSFiddle - React, Tailwind, and code Playground

HTML

<div class="imgcompare">
    <img src="http://placehold.it/600x400" />
    <div class="overlay">
        <img src="http://placehold.it/600x400/000" />
    </div>
</div>

CSS

.imgcompare {
    display: inline-block;
    position: relative;
}

.imgcompare > img {
    display: block;
    height: auto;
    max-width: 100%;
}

.imgcompare .overlay {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 10%;
    top: 0;
}

.imgcompare .overlay img {
    display: block;
    height: auto;
    max-height: 100%;
    width: auto;
}

JavaScript

jQuery( function( $ ) {
    
    $( '.imgcompare' ).on( 'mousemove', function( e ) {
        
        var $this = $( this ),
            offset = e.pageX - $this.offset().left;
        
        $this
            .children( '.overlay' )
                .css( 'right', ( $this.width() - offset ) / $this.width() * 100 + '%' );
        
    });
    
});