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: 10 Steps to Becoming a Laravel Expert
Laravel: 10 Steps to Becoming...

In this article, we will see 10 steps to becoming a laravel expert. Here, we will learn about how to become a larav...

Read More

May-26-2023

How to Install PHP PDO MySQL Extension in Ubuntu 22.04
How to Install PHP PDO MySQL E...

Hey there! If you're diving into PHP development on Ubuntu 22.04 and need to connect your applications to MySQL data...

Read More

Feb-28-2024

How To Install VueJs In Laravel
How To Install VueJs In Larave...

In this article, we will see how to install vue js in the laravel framework. if you are not aware of you are freshe...

Read More

Jul-12-2020

How To Send Email Using SendGrid In Laravel 9
How To Send Email Using SendGr...

In this article, we will see how to send email using SendGrid in laravel 9. Laravel provides a clean API over...

Read More

Jul-25-2022