ImagesLesson 95Free preview
Image Magnifier Glass
This lesson is part of How To · All levels
Summary
Image magnifier glass is the effect of magnifying glass that magnifies the portion of the image when the cursor is moved over it. This effect is created by stacking a lens over an image, and then re-displaying the same image as a larger-scale lens background. The background position is calculated from the cursor coordinates so that the visible part always corresponds to the point being designated.
Key points
- The image container is given a position: relative so that the lens can be positioned absolutely against the image.
- The lens uses the same image as the background with a background-size several times the original size.
- Event mousemove calculates the cursor coordinates relative to the edge of the image.
- The background position is moved by the coordinates multiplied by the zoom factor, then cut by half the size of the lens.
- Hide the lens when the cursor is out of the image so the effect doesn't stay in the old place.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.