JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test"></div>

CSS

#test {
top: 0px;
left: 0px;
-webkit-mask-position: -20px -20px;
-webkit-mask-size: 200px 400px;
-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 32px, rgba(0, 0, 0, 1) 38px);
background-color: white;
border: solid 1px red;
width: 200px;
height: 200px;
background-image: url('http://placekitten.com/g/200/300');
}

body {
    background: repeating-linear-gradient(45deg, lightgreen 0px, white 50px);
}

JavaScript

document.getElementById("test").addEventListener('mousemove', mouseMove, false);

function mouseMove (event)
{
    var ele = document.getElementById ('test');
    
    ele.style.webkitMaskPositionX = event.offsetX - 100 + "px";
    ele.style.webkitMaskPositionY = event.offsetY + 200 + "px";
}