Show Full Size Image On Hover - jQuery Image Magnifier

A simple, cross-browser Image Magnifier jQuery plugin that enables the user to show the full-size image on hover and view details with mouse move.

How to use it:

1. Load the image-magnifier.css and image-magnifier.js into the webpage which has jQuery loaded.

<link rel="stylesheet" href="image-magnifier.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="image-magnifier.js"></script>

2. Initialize the Image Magnifier and specify the paths to the thumbnail & full size images. In this example, the plugin will apply an inner zoom functionality on the image.

imageZoom(
  { blur: false, inner: true, tint: false },
  { src: 'full.jpg', height: 1280, width: 1600 },
  { src: 'thumb.jpg', height: 512, width: 640 }
);

3. Display the enlarged images next to the thumbnail with a blur effect.

imageZoom(
  { blur: true, inner: false, tint: false },
  { src: 'full.jpg', height: 1280, width: 1600 },
  { src: 'thumb.jpg', height: 512, width: 640 }
);

4. Apply an overlay effect to the thumbnail when hovering.

imageZoom(
  { blur: false, inner: false, tint: '#FF0000' },
  { src: 'full.jpg', height: 1280, width: 1600 },
  { src: 'thumb.jpg', height: 512, width: 640 }
);

---

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