jQuery-Css loupe

index.html

<div id="main">
<div class="lupa" id="glass"></div>
<div  id="frame">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<a href="google.com">google</a><h2>hello</h2>
 </div>


<div id="lupon">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<path class="co" d="M32.339,79.048c0,29.539,24.032,53.572,53.572,53.572c11.687,0,22.503-3.773,31.319-10.148
	c-0.075,0.793-0.233,1.946-0.271,3.253c-0.078,1.436-0.177,3.183-0.16,5.066c0.021,0.93,0.043,1.919,0.066,2.962
	c-0.02,0.551,0.3,0.8,0.712,0.975c0.402,0.185,0.627,0.548,0.933,0.847c4.661,5.009,10.876,11.687,17.091,18.365
	c6.215,6.678,12.43,13.356,17.091,18.365c0.271,0.332,0.626,0.574,0.796,0.975c0.088,0.197,0.154,0.412,0.316,0.534
	c0.152,0.132,0.407,0.164,0.673,0.182c1.043,0.094,2.012,0.203,2.959,0.27c1.876,0.153,3.618,0.187,5.038,0.228
	c1.392,0.068,2.62-0.004,3.402-0.001c0.803-0.017,1.26-0.053,1.26-0.053s0.069-0.453,0.143-1.253c0.053-0.78,0.213-2,0.246-3.393
	c0.061-1.42,0.152-3.16,0.134-5.042c0.001-0.95-0.038-1.924-0.057-2.971c0.001-0.267-0.013-0.524-0.134-0.684
	c-0.11-0.17-0.32-0.252-0.51-0.354c-0.388-0.198-0.603-0.57-0.915-0.864c-4.661-5.009-10.876-11.687-17.091-18.365
	c-6.215-6.678-12.43-13.356-17.091-18.365c-0.276-0.327-0.622-0.578-0.778-0.991c-0.146-0.423-0.37-0.76-0.922-0.78
	c-1.039-0.098-2.024-0.191-2.95-0.279c-1.877-0.152-3.627-0.178-5.064-0.204c-1.107-0.048-2.11,0-2.879,0.026
	c12.308-9.824,20.216-24.939,20.216-41.875c0-29.54-24.032-53.572-53.572-53.572S32.339,49.508,32.339,79.048z M46.017,79.048
	c0-21.997,17.896-39.894,39.894-39.894s39.894,17.897,39.894,39.894s-17.896,39.894-39.894,39.894S46.017,101.046,46.017,79.048z"/>
</svg>
</div>
</div>

jQuery-Css loupe.markdown

jQuery-Css loupe ('-' * 16)

A Pen by emilio on CodePen.

License.

script.js

$(document).ready(function(){
  //scale factor
  var sf = 2;
  c = $('#frame');
  l = $('#glass');
  lu = $('#glass');
  c2 = c.clone().attr('id', 'max' ).prependTo('#glass');
  c2.addClass('lcont');
  
 $("#glass").mousemove(function(e){
   var co = c2.position();
   var mx = e.pageX;
   var my = e.pageY;
   var lx =  mx-lu.width();
   var ly = my-lu.height();
   $("#glass").css({left:lx, top: ly});
   $("#lupon").css({left:lx-21, top: ly-18}); 
    
   var tpx; 
   tpx = (lx*-1);
   tpx = tpx - l.width()/2;
   var tpy;
   tpy = ly*-1 - (l.height()/4);
   
   var transf = 'scale(' + sf + ') translateX(' + tpx + 'px) translateY('+ tpy +'px)';
   c2.css({
      transform: transf,
      MozTransform: transf,
      WebkitTransform: transf,
      msTransform: transf
    });

  });
});

style.css

#main{

 position: relative;
}

#glass{
 position: absolute;
}


#frame, .lcont{
 width: 400px;
 height: 70px;
 font-size: 10px;
 line-height: 10px;
}

.lcont{
  top: 0;
  left: 0;
  position:relative;
   -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
  
  color: black;

  display: inline-block;
}
.lupa{
  width:40px;
  height:40px;
  background-color:white;
  z-index:50;
  border-radius: 100%;
  border-color:#F9BD0B;
  box-shadow: 0 0 0 5px rgba(249, 189, 11, 0.85), 
	0 0 5px 5px rgba(0, 0, 0, 0.25), 
	inset 0 0 10px 2px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

svg {
  width:100%;
  height:100%;
}

#lupon{
  width: 96px;
  heigth: 96px;
  position: absolute;
}

.co{
  fill:#F9BD0B;
   box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.85), 
	0 0 5px 5px rgba(0, 0, 0, 0.25), 
	inset 0 0 10px 2px rgba(0, 0, 0, 0.25);
  
 -webkit-filter: box-shadow( -5px -5px 5px #000 );
filter: drop-shadow( -5px -5px 5px #000 );   
  
}