How to create an image magnification effect on hover

Introduction:

Image magnification on hover is a technique that can greatly improve user experience specially when we use images with an small texts on it. By providing users with a larger and more detailed view of an image when they hover their cursor over it, this technique allows them to better appreciate the details and texture of the image without taking up extra space on the page. In this blog post, I will guide you through the steps to implement image magnification on hover on the website. By following these instructions, you can easily add this technique to your upcoming projects and enhance the user experience of the website visitors.

Getting Started

To implement the magnifier feature, we will be using a lightweight jQuery plugin called Magnify JS that adds a zoom functionality to images in the style of a magnifying glass. You can easily access this plugin by visiting this link.

Step 1:

Link the required files. Be sure to link the necessary files. For best practices, it’s recommended to load JavaScript files at the bottom of the page just before the closing </body> tag. You can now load Magnify from CDNJS.

				
					<link rel="stylesheet" href="/css/magnify.css">
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="/js/jquery.magnify.js"></script>

Step 2:

Specify the large image as shown below. To ensure the magnify effect works properly, it’s important to use a large image. If the image is too small, the magnify effect may not produce the desired results. Please refer to the example below for guidance on how to specify the appropriate size of the image. 
				
					<img decoding="async" src="IMGAGE-URL" class="zoom" data-magnify-src="SAME-IMAGE-URL">
Please note that the aspect ratio of the large image needs to be the same as the main image.

Step 3

Call the .magnify() function as shown below and ensure that this code comes after the loading of the two required JavaScript files mentioned in Step 1.

				
					    $(document).ready(function() {
          $('.zoom').magnify();
        });
In my example it looks like this: 
				
					<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.3/css/magnify.css"
    integrity="sha512-JxBFHHd+xyHl++SdVJYCCgxGPJKCTTaqndOl/n12qI73hgj7PuGuYDUcCgtdSHTeXSHCtW4us4Qmv+xwPqKVjQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.3/js/jquery.magnify.js"
    integrity="sha512-+8UjzErRT0NC6aEUwkW8TrucGEUHaq1pXSNiZz+WcE3iO6a+Y5joy6OdsS+VTkFGGkazVn35Xm5I+dksnjBlEg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    $(document).ready(function() {
          $('.zoom').magnify();
        });
</script>

We’re almost done. you can customize the CSS and JS if needed.

Demo

To see a live version of the image magnification on hover, you can click here to view it on the JogSport website where I have implemented this feature.

By following these steps, you can enhance the visual appeal and user experience of the client website. If you have any questions or suggestions, please feel free to slack me. Thank you for reading, and I hope you found this post useful and informative.

✌️