JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<style media="screen">
    figure.zoom {
    background-position: 50% 50%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    cursor: zoom-in;
    }
    figure.zoom img:hover {
    opacity: 0;
    }
    figure.zoom img {
    transition: opacity 0.5s;
    display: block;
    width: 100%;
    }
</style>

<figure class="zoom" onmousemove="zoom(event)" style="background-image: url(https://storage.googleapis.com/gpes-static/zoom-demo/image.webp)">
    <img src="https://storage.googleapis.com/gpes-static/zoom-demo/image.webp" />
    <!-- CAREFULLY COMPRESSED WEBP IMAGE, 2240px wide -->
</figure>

<script type="text/javascript">
    const zoom = function(e) {
    var zoomit = e.currentTarget;
    e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX
    e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX
    x = offsetX / zoomit.offsetWidth * 100
    y = offsetY / zoomit.offsetHeight * 100
    zoomit.style.backgroundPosition = x + '% ' + y + '%';
    }
</script>