Minimal Circular Image Magnifier with jQuery and CSS3

A super tiny jQuery image zoom script to display the large version of your image in a circular magnifying glass that moves with the mouse. 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.

How to use it:

1. Include jQuery library and the image magnifier script at the bottom of the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/main.js"></script>

2. Create a magnifying glass container which which will contain the original/large image.

<div class="large"></div>

3. Insert the small image into the document.

<img class="small" src="small.jpg">

4. Don't forget to wrap the magnifying glass container and the small image into an image magnifier container.

<div class="magnify"> 
  <div class="large"></div>
  <img class="small" src="small.jpg">
</div>

5. Create the magnifying glass and insert the larger image into it using CSS/CSS3.

.magnify {
  width: 200px;
  margin: 50px auto;
  position: relative;
}

.large {
  width: 175px;
  height: 175px;
  position: absolute;
  border-radius: 100%;
  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);
  background: url('iphone.jpg') no-repeat;
  display: none;
}

.small { display: block; }

---

This awesome jQuery plugin is developed by kavanpancholi. For more Advanced Usages, please check the demo page or visit the official website.