JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <img src="http://scitechdaily.com/images/New-VLT-Image-of-Messier-100.jpg" />
</div>

CSS

#container {
    position : relative;
    width    : 240px;
    height   : 240px;
    overflow : hidden;
}
#container img {
    position : relative;
}

JavaScript

$('img').on('mouseenter', function () {
    
    var $theClone = $(this).clone().css({ opacity : 0.5, position : 'absolute', top : 0 });
    
    $(this).parent().append($theClone);
    
    $theClone.animate({ left : 5 }, 500).on('mouseleave', function () {
        $(this).stop().fadeOut(250, function () {
            $(this).remove();
        });
    });      
});