JSFiddle - React, Tailwind, and code Playground

by tmyie

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>

<p class="y">
    
</p>

<p class="x"></p>

CSS

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

JavaScript

$('.gallery-container img').hover(function () {
    $(this).css('max-width', '200%');
    $(this).mousemove(function (e) {
        $(this).offset({
             top: e.pageY - 300,
            left: e.pageX - 300
           
        });
        $('.y').text(e.pageY - 300);
        $('.x').text(e.pageX - 300);
    });
    console.log('over');
}, function () {
    //$(this).css('max-width', '100%');
    //$(this).css('left', '');
    //$(this).css('top', '');
});