Magnify glass for image zoom using Jquery and CSS3

Magnify glass for image zoom using Jquery and CSS3 is Originally Coded by ruby_on_tails for TheCodePlayer. This Code will make a realistic magnifying glass using Jquery and CSS3 through the magnification Loupe. The code uses CSS3 box-shadow and border-radius properties to create the magnifying glass. Jquery is used to position it at the cursor coordinates and change the background position accordingly. Moving the cursor away from the image gently fades out the magnifying glass bringing the image back to the default state.

Screen UI is created & copyrighted by Cosmin Capitanu and Macbook by JustD, you can also download the entire collection of Macbook here.

Please don’t forget to share/tweet this article if you liked it. Subscribe to our Newsletter to get Latest updates on your inbox.

7 CommentsClose Comments

7 Comments

  • newatthis
    Posted October 2, 2013 at 3:38 am 0Likes

    I tried using several other magnifying glass plugins in a free html5 website template I’m using, none worked except for this one. Very straightforward for a newbie with minimal coding experience. One key is in sizing your original image files properly. However, I have three images on the page, not one, and I want each to magnify separately. I managed to get them all to magnify by simply duplicating the CSS class (e.g. .large, .large2, .large3) and duplicating corresponding code as appropriate in the magnify.js file. Probably not the most elegant solution but it works…except now the magnifying glass appears on all three images simultaneously when I mouse over any single image. Any ideas from someone more experienced on how to fix this? Also, the plugin seems to have killed the responsiveness of my page.

    • newatthis
      Posted October 2, 2013 at 5:27 am 0Likes

      Nevermind. I figured it out by just duplicating the entire CSS & .js code & renaming for each of my three images.

      • Rafael Sandim
        Posted July 4, 2014 at 11:45 am 0Likes

        I made fixes, now magnify supports multiple images. If you wanna try. =D

  • Anita Ghimire
    Posted November 11, 2013 at 9:35 am 0Likes

    I have multiple images so how can i add multiple images for magnify

    • Rafael Sandim
      Posted July 4, 2014 at 11:43 am 0Likes

      I made fixes, now magnify supports multiple images. =D

  • Rafael Sandim
    Posted July 3, 2014 at 10:16 pm 0Likes

    I made some fixes on Magnify Glass, one of them is support of multiple images, you can check it out on my github: https://github.com/rjsandim/Magnify-glass-with-multiple-images-support

    • web3canvas
      Posted July 4, 2014 at 3:11 pm 0Likes

      Great !!

Leave a comment