jQuery Image Magnifier on Mouse Hover

WebSolutionStuff | Jan-04-2021 | Categories : jQuery CSS Bootstrap

In this post i will give you tutorial about jquery image magnifier on mouse hover, using image magnifier you can enlarge image on mouse hover.

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

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

 

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;
        } 
        h1 { 
            color: #26a69a;             
        } 
        .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>websolutionstuff.com</h1> 
    </center> 
    <div class="container-fluid"> 
        <b>Move your Cursor Over the Image</b> 
        <div class="parent"> 
            <img src="https://websolutionstuff.com/adminTheme/global_assets/images/favicon.png">
        </div>   
        <span class="contain"></span> 
    </div>   
    <script> 
        $(document).ready(function() { 
            $('.parent').css('width', $('img').width());
            $('img').parent().zoom({ 
                magnify: 2, 
                target: $('.contain').get(0) 
            }); 
        }); 
    </script> 
</body>   
</html>

 

Output : 

jquery_image_magnifier_on_mouse_hover

 

Featured Post