Zoom Image on Mouseover using jQuery – zoomio

How to Create Zoom Image On Mouseover Using Jquery

1. The zoomio makes it easy to create zoom image on mouseover using jQuery. So, load the jQuery JavaScript library into your web project.

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

2. Similarly, include plugin’s CSS and Js file in your webpage.

<!-- zoomio CSS -->
<link rel="stylesheet" href="css/zoomio.css">
<!-- zoomio JS -->
<script src="js/zoomio.js"></script>

3. Place your image in HTML with small size and put the fullsize image URL in data-largesrc:

     <div class="container">
         <img class="sampleimage" src="images/carandgirl.jpg" data-largesrc="images/carandgirl.jpg" /> 
         <img class="sampleimage" src="images/table.jpg" data-largesrc="images/table.jpg" /> 
     </div>

4. At the end, call the zoomio plugin in jQuery document ready function to active the zoom effect on hover.

$(document).ready(function(){
	$('.sampleimage').zoomio();
});