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.

Web3Canvas provides Freebies & Resources for Designers.

TwitterFacebook
  • newatthis

    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

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

      • Rafael Sandim

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

  • Anita Ghimire

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

    • Rafael Sandim

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

  • Rafael Sandim

    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