jQuery Plugin For Image Zoom On Mouse Hover - ZoomPic

jQuery Plugin For Image Zoom On Mouse Hover - ZoomPic
File Size: 9.69 KB
Views Total: 4842
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

ZoomPic is a simplist jQuery plugin used to zoom and display the original size of a thumbnail image when hovered.

How to use it:

1. Include the needed jQuery JS library and the jQuery ZoomPic's script in the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/ZoomPic.js"></script>

2. Insert images into your web page.

<div class="images">
  <a href="#"><img src="1.jpg" ></a>
  <a href="#"><img src="2.jpg" ></a>
  <a href="#"><img src="3.jpg" ></a>

3. Resize the images in your CSS to create thumbnails.

.images img {
  width: 160px;
  height: 160px;

4. Call the plugin on the parent element to active the image zoom functionality on mouseover.


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