jQuery – Zoom images on mouse over with ZooMove

You may have already seen the zoom effect on the view product details page on e-commerce websites. The part of the image will zoom according to the mouse movement.

You can also implement this on your own website to provide a better user experience and allow them to get a closer look at an image.

In this tutorial, I am using the ZooMove jQuery plugin for zoom functionality. It is easy to implement and customizable.

jQuery - Zoom images on mouse over with ZooMove


  1. Download and include
  2. Setup
  3. Other Attributes and options
  4. Conclusion

1. Download and include

  • You can download this plugin from here.
  • Add CSS on the page <head> section.
<link href='zoomove-master/dist/zoomove.min.css' rel='stylesheet' type='text/css'>
  • Include the plugin script with the jQuery library.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src='zoomove-master/dist/zoomove.min.js' type='text/javascript'></script>

2. Setup


Create <figure class="zoo-item">  element and specify your image source in data-zoo-image attribute.

<!--  image -->
<figure class="zoo-item" data-zoo-image="image.jpg"></figure>


Call ZooMove() method on .zoo-item class.

NOTE – Either put the script after <figure > elements creation or put it at the end of the <body> or <html>.

<script type='text/javascript'>

View Demo

3. Other Attributes and options

There are some attributes and options for modifying the default functionality.


  • data-zoo-image – Take image source.
  • data-zoo-scale – Specify the zoom size. The default is 1.5 (150%). e.g. data-zoo-scale="5"
  • data-zoo-move –  The image will move with mouse movement or not. The default value is true. e.g. data-zoo-move="false".
  • data-zoo-over – Define whether the image may be above. The default value is false. e.g. data-zoo-over="true".
  • data-zoo-cursor – Set either pointer or default cursor. The default values is false. e.g. data-zoo-cursor="true".

Example –

<figure class="zoo-item" 


You can also do customization with options in the script.

Example –

Here, I am specifying the same values as above.

   image: 'image.jpg',
   scale: '5',
   move: 'true',
   over: 'true',
   cursor: 'true'

View Demo

4. Conclusion

This jQuery plugin enlarges the image on mouseover for this you need to specify your image source in the <figure class='zoo-item'> element using data attribute and call ZooMove() method on class='zoo-item'.

For more customization use available attributes or options.

Browser support –

  • Chrome – 42+
  • Firefox – 41+
  • IE – 9+
  • Opera – 29+
  • Safari – 9+
  • Edge – 12+
If you found this tutorial helpful then don't forget to share.