title: html javascript css Magnifying glass
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  
   var native_width = 0;
   var native_height = 0;
  
   //Now the mousemove function
   $(".magnify").mousemove(function(e){
    //When the user hovers on the image, the script will first calculate
    //the native dimensions if they don't exist. Only after the native dimensions
    //are available, the script will show the zoomed version.
    if(!native_width &amp;&amp; !native_height)
    {
     //This will create a new image object with the same image as that in .small
     //We cannot directly get the dimensions from .small because of the 
     //width specified to 200px in the html. To get the actual dimensions we have
     //created this image object.
     var image_object = new Image();
     image_object.src = $(".small").attr("src");
     
     //This code is wrapped in the .load function which is important.
     //width and height of the object would return 0 if accessed before 
     //the image gets loaded.
     native_width = image_object.width;
     native_height = image_object.height;
    }
    else
    {
     //x/y coordinates of the mouse
     //This is the position of .magnify with respect to the document.
     var magnify_offset = $(this).offset();
     //We will deduct the positions of .magnify from the mouse positions with
     //respect to the document to get the mouse positions with respect to the 
     //container(.magnify)
     var mx = e.pageX - magnify_offset.left;
     var my = e.pageY - magnify_offset.top;
     
     //Finally the code to 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"))
     {
      //The background position of .large will be changed according to the position
      //of the mouse over the .small image. So we will get the ratio of the pixel
      //under the mouse pointer with respect to the image and use that to position the 
      //large image inside the magnifying glass
      var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
      var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
      var bgp = rx + "px " + ry + "px";
      
      //Time to move the magnifying glass with the mouse
      var px = mx - $(".large").width()/2;
      var py = my - $(".large").height()/2;
      //Now the glass moves with the mouse
      //The logic is to deduct half of the glass's width and height from the 
      //mouse coordinates to place it with its center at the mouse coordinates
      
      //If you hover on the image now, you should see the magnifying glass in action
      $(".large").css({left: px, top: py, backgroundPosition: bgp});
     }
    }
   })
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*Some CSS*/
  * {margin: 0; padding: 0;}
  .magnify {width: 200px; margin: 50px auto; position: relative;}
  
  /*Lets create the magnifying glass*/
  .large {
   width: 175px; height: 175px;
   position: absolute;
   border-radius: 100%;
   
   /*Multiple box shadows to achieve the glass effect*/
   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);
   
   /*Lets load up the large image first*/
   background: url('http://thecodeplayer.com/uploads/media/iphone.jpg') no-repeat;
   
   /*hide the glass by default*/
   display: none;
  }
  
  /*To solve overlap bug at the edges during magnification*/
  .small { display: block; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Lets make a simple image magnifier --&gt;
  &lt;div class="magnify"&gt;
   &lt;div&gt;I want to magnify whole page Including text image and everything&lt;/div&gt;
   &lt;!-- This is the magnifying glass which will contain the original/large version --&gt;
   &lt;div class="large"&gt;&lt;/div&gt;
   
   &lt;!-- This is the small image --&gt;
   &lt;img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="200"/&gt;
   
  &lt;/div&gt;
  
  &lt;!-- Lets load up prefixfree to handle CSS3 vendor prefixes --&gt;
  &lt;script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;!-- You can download it from http://leaverou.github.com/prefixfree/ --&gt;
  
  &lt;!-- Time for jquery action --&gt;
  &lt;script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want magnifying glass magnify whole webpage not only image. the magnifying glass magnify everything on page images text video. And doesn't disappear when nothing on div or webpage.</p>
  
  <p>Here is the jsfiddle...</p>
  
  <p><a href="http://jsfiddle.net/ckc5r7sp/" rel="nofollow"><strong>JsFiddle</strong></a></p>