JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gallery-container">
    <div class="image-container">
        <img src="http://upload.wikimedia.org/wikipedia/commons/a/a4/Ara_macao_-_two_at_Lowry_Park_Zoo.jpg" alt="" />
    </div>
</div>

CSS

.gallery-container {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    overflow: hidden;
}
.image-container {
    position: relative;
}
img {
    max-width: 100%;
    position: relative;
}

JavaScript

$('.image-container img').hover(function () {
    $(this).css('max-width', '200%');
    $(this).mousemove(function (e) {
        $(this).offset({
             top: -e.pageY,
            left: -e.pageX
           
        });
    });
}, function(){
    $(this).unbind("mousemove");
    $(this).css('max-width', '100%');
    $(this).offset({
             top: 0,
            left: 0
        });
});