Lens Zoom using JQuery and CSS

Developer Blog

Just copy,paste and provide the src of image you want to zoom

<!– Lets make a simple image magnifier –>

<!– This is the magnifying glass which will contain the original/large version –>

<!– This is the small image –>
<img src=”the image you want to zoom using lens” width=”200″/>


/*Some CSS*/
* {margin: 0; padding: 0;}
.magnify {width: 200px; margin: 50px auto; position: relative; cursor: none}

/*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);

/*hide the glass by default*/
display: none;

/*To solve overlap bug at the edges during magnification*/
.small { display: block; }

//download and attach jquery-1.4.2.js below
<script type=”text/javascript”…

View original post 397 more words