title: Scale any type of content under 'magnifying' div
body: <p>I've got a 'magnifying' div (.large) that's attached to the mousemove event but the underlying content remains clickable.</p>
  
  <p><a href="http://jsfiddle.net/7fbB8/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p>I'm struggling to find a way to scale the underlying div within the magnifying zoom without building the div twice, scaling one version up and bounding it within .large (typical jquery zoom plugins seem to have a small image on the page and a larger image revealed on hover). This seems like a convoluted method to me, can't I just alter the pixel ratio within the .large div (less logical pixels per physical pixel?) and create a localized zoom effect - is this possible? </p>
  
  <p>NOTE: Similar set up in the question asked <a href="https://stackoverflow.com/questions/24565793/applying-css-to-a-moving-div-when-it-reaches-certain-area-static-magnifier-for">here</a> (but the content is cloned and hidden, I'd like to avoid this) . </p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;div class="magnify"&gt;
      &lt;img class="small" src="http://placehold.it/300x150" width="400"/&gt; 
      &lt;a href="#" target = "_blank" style="position:absolute;left:50%;top:40%;width:20px;height:20px;border:5px solid red; border-radius:10px"&gt;Demo clickable link&lt;/a&gt;
    &lt;div class="large"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;p id="demo"&gt;&lt;/p&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>   .magnify {width: 900px; margin: 50px auto; position: relative;border:1px solid red;}
     .small { display: block; width:900px;}
  
     .large {
      width: 275px; height: 275px;
      position: absolute;
      border-radius: 100%;
  
      pointer-events:none; /* allows user to click through the div to 
                       underlying content */   
      }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function(){
  
  $(".magnify").mousemove(function(e){
  
      x = e.clientX;
      y = e.clientY;
      coor = "Coordinates: (" + x + "," + y + ")";
      document.getElementById("demo").innerHTML = coor;
  
  
      var magnify_offset = $(this).offset();
      var mx = e.pageX - magnify_offset.left;
      var my = e.pageY - magnify_offset.top;
  
      //fade out the glass if the mouse is outside the container
      if(mx &lt; $(this).width() &amp;&amp; my &lt; $(this).height() &amp;&amp; mx &gt; 0 &amp;&amp; my &gt; 0)
      {
          $(".large").fadeIn(100);
      }
      else
      {
          $(".large").fadeOut(100);
      }
      if($(".large").is(":visible"))
      {
          //move the magnifying glass with the mouse
          var px = mx - $(".large").width()/2;
          var py = my - $(".large").height()/2;
  
          $(".large").css({left: px, top: py});
      }
  })
  })
  </code></pre>