Implement a CSS/JavaScript Magnifying Glass using code from TheCodePlayer (http://thecodeplayer.com/)

tutorial_29_example_1.html

  <!-- Code is derived from http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3 by TheCodePlayer -->

  <p style='text-align: center'>The image used was taken by the NASA Cassini spacecraft and shows the moon
     <a href="http://www.nasa.gov/mission_pages/cassini/multimedia/pia12568.html">Mimas of planet Saturn</a>
  </p>
  <br>

  <div id="container">
    <!-- This is the magnifying glass which will contain the original/large version as a background image -->
    <div class="magnifier"></div>

    <!-- This is the small image -->
    <img class="small" src="assets/nasa_saturn_mimas_herschel_crater_2800_2800.jpg" width="600"/>
  </div>

  <style>

    #container {
      width: 600px;  /* size of the small image */
      margin: auto;  /* position in center of the page */
      position: relative;
      cursor: none;  /* hide the normal cursor */
    }

    .magnifier {
      position: absolute;
      width:  200px;
      height: 200px;
      display: none;  /* hidden at startup */

      border-radius: 100%;    /* 100% makes it a circle - reduce to 0% for a square */

      /* box shadow creates a border around the magnifying glass */
      box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
                  0 0 7px 7px rgba(0, 0, 0, 0.25),
                  inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    }

    .small {
      display: block;
    }
  </style>

  <script>
  // Uses jQuery.... include that library elsewhere

  $(document).ready(function(){

    // Create an image object from the full size image - used to get dimensions
    var image_object = new Image();
    image_object.src = $(".small").attr("src");

    var full_size_width  = 0;
    var full_size_height = 0;

    $(".magnifier").css("background","url('" + $(".small").attr("src") + "') no-repeat");

    // Set up the event handler for when the mouse moves within #container
    $("#container").on('mousemove', function(e){
      e.preventDefault();

      // Get the full size image dimensions the first time though this function
      if(!full_size_width && !full_size_height)  {
        // Get the dimension of the full size image
        full_size_width  = image_object.width;
        full_size_height = image_object.height;

      } else {
        // Get the x,y coordinates of the mouse with respect to #container
        var container_offset = $(this).offset();
        var mx = e.pageX - container_offset.left;
        var my = e.pageY - container_offset.top;

        // Fade out the magnifying glass when the mouse is outside the container
        if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)  {
          $(".magnifier").fadeIn(100);
        } else {
          $(".magnifier").fadeOut(100);
        }

        if($(".magnifier").is(":visible")) {

          // Calculate the magnifier position from the mouse position
          var px = mx - $(".magnifier").width()/2;
          var py = my - $(".magnifier").height()/2;

          // Calculate the portion of the background image that is visible in the magnifier
          // using the ratio in size between the full size and small images
          var rx = -1 * Math.round(mx / $(".small").width()  * full_size_width  - $(".magnifier").width() / 2);
          var ry = -1 * Math.round(my / $(".small").height() * full_size_height - $(".magnifier").height() / 2);
          var bgp = rx + "px " + ry + "px";

          // Update the position of the magnifier and the portion of the background image using CSS
          $(".magnifier").css({left: px, top: py, backgroundPosition: bgp});
        }
      }
    })
  })
  </script>