let box = document.querySelector(".box"); let img1 = document.querySelector(".img1"); const t = img1.getBoundingClientRect(); let bg = img1.querySelector('image'); function moverCursor(e) { let x = e.pageX - t.left - (t.width / 2); let y = e.pageY - t.top - (t.height / 2); img1.style.setProperty(`top`, `${y}px`); img1.style.setProperty(`left`, `${x}px`); bg.style.setProperty(`x`, `${-x}px`); bg.style.setProperty(`y`, `${-y}px`); } box.addEventListener("mousemove", moverCursor); /*CSS*/ .box { width: 500px; height: 250px; border: 2px solid red; position: relative; background-image: url(https://picsum.photos/600/250); overflow: hidden; } .img1 { position: absolute; } /*HTML*/ <div class="box"> <svg class="img1" width="150" height="150"> <defs> <filter id="filter"> <feGaussianBlur stdDeviation="10" /> </filter> <mask id="mask"> <ellipse cx="50%" cy="50%" rx="40%" ry="40%" fill="white" filter="url(#filter)"></ellipse> </mask> </defs> <image href="https://picsum.photos/500/250" width="500" height="250" mask="url(#mask)"></image> </svg> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter