jQuery Plugin For Image Zoom On Mouse Hover - ZoomPic

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

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.