jQuery Plugin To Enlarge Images On Mouse Hover - HoverImageEnlarge.js

HoverImageEnlarge.js is a tiny jQuery image viewer plugin to enlarge/shrink a given image in place when mouse hovers over it.

How to use it:

1. Wrap the image in an image viewer box. The plugin will grows the viewer box to the full image size.

<div class="image-wrapper">
<img class="my-image" src="1.jpg" />
</div>

2. Set the fixed width and height of the viewer box.

.image-wrapper {
width: 150px;
height: 150px;
overflow: hidden;
}

3. Include the jQuery library and jQuery HoverImageEnlarge.js in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.hoverImageEnlarge.js"></script> 

4. Initialize the plugin.

<script>
$(".image-wrapper").hoverImageEnlarge();
</script>

---

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