Image Zoom on Hover with jQuery

Category: Zoom Effects | January 5, 2020
Image Zoom on Hover with jQuery
Author: nabedkhan
Official Page: Go to Website
Last Update: January 5, 2020
License: MIT

The “jquery_zoom” is a classical jQuery plugin that has the ability to ad Image Zoom on hover. You can easily enlarge the single image when click.

Basically, it is very useful to create simple zoom effect functionality. The plugin gives you full control to customize its functionality by using its built-in options.

The idea to enlarge the image itself by staying within the container. So when you mouse hover and mouse over the image, you will see the Zoom effect according to the mouse position.

There is another solution to create the Zoom effect on click so if you are looking for that then you can check out our previous article Javascript Image Zoom On Click.

Furthermore, you can define custom magnify scale and transition for zoom effect within its configuration options. It also offers custom callback support that you can use to execute the function.

How to Create jQuery Zoom Image On Hover

In order to create the jQuery zoom image on hover, we need to add the required files. We have two important plugins files and a jQuery file.

Let’s add the CSS and Javascript file into your document to start with the “jquery_zoom” plugin.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- jquery_zoom_plugin CSS -->
<link rel="stylesheet" href="css/style.css">

<!-- jquery_zoom_plugin JS -->
<script src="js/jquery.zoom.js"></script>

After that, we will create the HTML structure. Here we are going to create two different images and place them side by side.

But you can also create a simple div with having class name zoom then place your image inside it.

<div class="rt-container">
	<div class="col-rt-3">
		<div class='zoom'>
			<img src='images/image 1.jpg' width='555' height='320' alt='Nabed Khan'/>
		</div>
	</div>
	<div class="col-rt-3">
		<div class='zoom'>
			<img src='images/image 2.jpg' width='555' height='320' alt='Nabed Khan'/>
		</div>
	</div>
</div>

In the end, we will call the zoom plugin in the jQuery document ready function and done.

    $(document).ready(function(){
    	$('.zoom').zoom();
    });

Configuration Options for Zoom Image Plugin

The following are some advanced configuration options to create/customize a simple jQuery zoom image on hover.

Option Default Type Description
on ‘mouseover’ String It define the event on which the zoom effect will initialize. Possible options: grab, click, toggle.

Example:

$('.zoom').zoom({
	on : 'mouseover',
});
magnify 1 Number The zooming level in number.

Example:

$('.zoom').zoom({
	magnify : 1,
});
duration 120 Number This option defines the transition duration in milliseconds.

Example:

$('.zoom').zoom({
	duration : 120,
});
touch true Boolean Enable/disable touch fallback for zoom.

Example:

$('.zoom').zoom({
	touch : true,
});
callback false Function In this option, you can define your callback function.

Example:

$('.zoom').zoom({
	callback : false,
});

That’s it. It’s ready to use on live sites and you can implement on any kind of website.

You May Also Like

Leave a Comment