Image Hover Zoom

<div class="iz"><div class="iz-img" id="izImg"></div></div>
<p class="iz-hint">Move your cursor over the image to zoom</p>

body{background:#f6f7fa;flex-direction:column;gap:14px}
.iz{width:300px;height:220px;border-radius:16px;overflow:hidden;cursor:zoom-in;box-shadow:0 12px 30px rgba(20,25,50,.15)}
.iz-img{width:100%;height:100%;background:linear-gradient(135deg,#ff7a18,#ff477e,#5b6cff);background-size:cover;transition:transform .1s ease}
.iz-hint{font:500 13px/1 system-ui,sans-serif;color:#8a93ad}

var iz=document.querySelector('.iz'),img=document.getElementById('izImg');
iz.addEventListener('mousemove',function(e){var r=iz.getBoundingClientRect();img.style.transformOrigin=((e.clientX-r.left)/r.width*100)+'% '+((e.clientY-r.top)/r.height*100)+'%';img.style.transform='scale(2)'});
iz.addEventListener('mouseleave',function(){img.style.transform='scale(1)'});