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

jQuery Plugin To Enlarge Images On Mouse Hover - HoverImageEnlarge.js
File Size: 4.53KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: Free for personal use
   

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2013

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>

For more Advanced Usages, please check the demo page or visit the official website.