jQuery Image Magnifier on Mouse Hover

In this tutorial, We will see jQuery image magnifier on mouse hover. using an image magnifier you can enlarge the image on mouse hover. Using jquery you can image zoom on mouse hover. Also, you can jquery image zoom in zoom out on mouse click.

In this example, Users can directly zoom images in with the mouse wheel or pinch zoom on touch devices using javascript or image zoom on mouseover using jquery.

Also, you can use different types of plugins for zoom images. here I have used zoom.js CDN to zoom or magnify images. using zoom.js jQuery that enables the user to show the full-size image on hover and view details with mouse move.

So, let's see jquery image magnifier on mouse hover, magnify images on mouse hover effect.

Example : 

<!DOCTYPE html> 
<html lang="en">   
<head> 
    <meta charset="utf-8" />         
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.js"></script>   
    <style> 
        body { 
            margin: 20px; 
            border: 1px solid grey;
        }        
        .container { 
            display: block; 
            padding: 0px; 
        }           
        .contain { 
            position: fixed; 
            right: 10%; 
            top: 25%; 
            width: 200px; 
            height: 220px;
            margin-top: 25px;
        }           
        img { 
            width: 250px; 
            height: 250px;
            margin: 20px;
        }
        b{
          margin-left: 20px; 
        }
    </style> 
</head>  
<body> 
    <center> 
        <h1>jQuery Image Magnifier On Mouse Hover - Techsolutionstuff</h1> 
    </center> 
    <div class="container-fluid"> 
        <b>Move your Cursor Over the Image</b> 
        <div class="parent"> 
            <img src="https://laravelnews.imgix.net/laravel-news__logo.png?ixlib=php-3.3.1">
        </div>   
        <span class="contain"></span> 
    </div>   
    <script> 
        $(document).ready(function() { 
            $('.parent').css('width', $('img').width());
            $('img').parent().zoom({ 
                magnify: 1, 
                target: $('.contain').get(0) 
            }); 
        }); 
    </script> 
</body>   
</html>

 

 

Output : 

jquery_image_magnifier_on_mouse_hover_output

 


You might also like :

techsolutionstuff

Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of techsolutionstuff.com. Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.

RECOMMENDED POSTS

FEATURE POSTS