zoom.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
        box-sizing: border-box;
      }

      .img-zoom-container {
        position: relative;
      }

      .img-zoom-lens {
        position: absolute;
        border: 1px solid #d4d4d4;
        /*set the size of the lens:*/
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.301);
      }

      .img-zoom-result {
        position: absolute;
        width: 300px;
        height: 300px;
        border: 1px solid #d4d4d4;
        border-radius: 10px;
      }

      .img-zoom-result.on {
        animation: aparece 0.5s;
      }

      @keyframes aparece {
        to {
          opacity: 1;
        }
        from {
          opacity: 0;
        }
      }
    </style>
    <script>

    </script>
  </head>
  <body>
    <h1>Image Zoom</h1>

    <p>Mouse over the image:</p>

    <div class="img-zoom-container">
      <img id="myimage" src="./img/protuto-2.jpg" width="300" height="240" />
      <div id="myresult" class="img-zoom-result"></div>
    </div>

    <p>
      The image must be placed inside a container with relative positioning.
    </p>
    <p>
      The result can be put anywhere on the page, but must have the class name
      "img-zoom-result".
    </p>
    <p>
      Make sure both the image and the result have IDs. These IDs are used when
      a javaScript initiates the zoom effect.
    </p>

    <script>
      // Initiate zoom effect:
      imageZoom("myimage", "myresult");
    </script>
  </body>
</html>