jQuery Image Magnifier on Mouse Hover

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

In this article, we will see a jquery image magnifier on mouse hover. Using an 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 different types of plugins for zoom images. here we 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 movement.

So, let's see zoom image on mouseover using jquery, and how to zoom image on hover.

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


You might also like:

Recommended Post
Featured Post
Laravel tips: DB Models and Eloquent - Part 2
Laravel tips: DB Models and El...

Laravel, the PHP web application framework, is renowned for its elegant and efficient approach to handling databases thr...

Read More

Oct-13-2023

Autotab To Next Input Field JQuery
Autotab To Next Input Field JQ...

In this article, we will see how to focus on the next input when the max length is reached. Sometimes we have...

Read More

Aug-19-2020

How Generate PDF From HTML View In Laravel
How Generate PDF From HTML Vie...

In this example, I will teach you how to generate PDF files from an HTML view in laravel. For generating PDF files I wil...

Read More

Jun-01-2020

Laravel 9 Socialite Login With Twitter Account
Laravel 9 Socialite Login With...

In this article, we will see laravel 9 socialite login with twitter account. Many websites provide different t...

Read More

Nov-12-2022