JSFiddle - React, Tailwind, and code Playground

by Ashish Mishra

HTML

<div id="imgdiv"></div>
    <div id="text"></div>

CSS

#imgdiv{
    position:absolute; top:150px; left:150px; border:solid black 2px; overflow:hidden; height:300px; width:230px; background:url('http://pngimg.com/upload/fish_PNG1151.png') center;
    background-size:contain;
}

JavaScript

function change() {
    var imgdiv =  document.getElementById("imgdiv");
    imgdiv.style.transform = "scale(2)";
    var x = event.pageX;
    var y = event.pageY;
    document.getElementById("text").innerText = "x: " + x + ", y: " + y;
    imgdiv.style.backgroundPositionX = x+'px';
    imgdiv.style.backgroundPositionY = y+'px';
}

document.onmousemove = function(){

    change()

}