Hover-triggered Image Zoom And Pan Plugin With jQuery - Zoom Image

Zoom Image is a very simple jQuery plugin which allows you to pan and zoom an image within a specific container by using mouse hover and move.

How to use it:

1. The html structure.

<figure class="zoom-image">
  <figure></figure>
</figure>

2. Add your own image as background to the figure elements.

.zoom-image,  .zoom-image > figure { background-image: url( zoom.jpg );

3. Set the size of your zoom area.

.zoom-image {
  width: 500px;
  height: 500px;
}

4. The core CSS styles for the plugin.

.zoom-image {
  position: relative;
  margin: 0;
  background-size: cover;
}

.zoom-image > figure {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  background-repeat: no-repeat;
  opacity: 0;
  -o-transition: opacity 200ms ease-out;
  -moz-transition: opacity 200ms ease-out;
  -webkit-transition: opacity 200ms ease-out;
  transition: opacity 200ms ease-out;
}

.zoom-image > figure:hover { opacity: 1; }

5. Import jQuery library and the jQuery Simple Zoom plugin into the webpage when needed.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="zoom-image.js"></script> 

6. Initialize the plugin as follow.

$( '.simple-zoom' ).simpleZoom(); 

7. Disable the zooming functionality work on touch devices.

$( '.zoom-image' ).zoomImage({
  touch: false
});

Change log:

2016-11-28

• renamed to Zoom Image
• JS clean up

---

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