JSFiddle - React, Tailwind, and code Playground

by Rafael Braga

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<head>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      </head>
      <body>


        <img id="target" style="margin-left: 160px; width: 700; height: 500px;" src="https://iili.io/0hL7ou.png">
</body>

JavaScript

var $element = $('#target');
          $element.css({'transform': 'rotate(180deg)'}); // rotate imagem in html

          // Constants
          var $IMAGE_URL    = $element.attr("src");
          var NATIVE_IMG    = new Image();
          NATIVE_IMG.src    = $element.attr("src");

          var lens = document.createElement("div");
          lens.id = "BlowupLens";
          $("body").append(lens);
          $blowupLens = $("#BlowupLens");

          $blowupLens.css({
            "position"          : "absolute",
            "display"           : "none",
            "pointer-events"    : "none",
            "zIndex"            : 999999,
            "width"             : 200,
            "height"            : 200,
            "border"            : "6px solid #FFF",
            "background"        : "#FFF",
            "border-radius"     : "50%",
            "box-shadow"        : "0 8px 17px 0 rgba(0, 0, 0, 0.2)",
            "background-repeat" : "no-repeat",
          });

          // Show magnification lens
          $element.mouseenter(function () {
            $blowupLens.css("display", "block");
          });


          // Mouse motion on image
          $element.mousemove(function (e) {

            // Lens position coordinates
            var lensX = e.pageX - (200 / 2);
            var lensY = e.pageY - (200 / 2);

            var width = $element.width();
            var height = $element.height();

            // Relative coordinates of image
            var relX = e.pageX - $('#target').offset().left;
            var relY = e.pageY - $('#target').offset().top;

            // Zoomed image coordinates 
            var zoomX = -Math.floor(relX / width * (NATIVE_IMG.width) - 200 / 2);
            var zoomY = -Math.floor(relY / height * (NATIVE_IMG.height) - 200 / 2);

            var backPos = zoomX + "px " + zoomY + "px";
            var backgroundSize = NATIVE_IMG.width + "px " + NATIVE_IMG.height + "px";

            // Apply styles to lens
        ...