Magnifying glass for image zoom using jQuery and CSS3

Magnifying glass for image zoom using jQuery and CSS3

Learn to make a realistic magnifying glass using Jquery and CSS3. Hover above the image to see the action.

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.

Tags:

Leave a Reply