ImagesLesson 94Free preview
Image Zoom
This lesson is part of How To · All levels
Summary
Image zoom allows users to view the details of an image by magnifying it while hovering or clicking. The basic effect is to use a transform scale inside a hidden overflow container. A more interactive version changes the transforms to follow the cursor position so that the enlarged area matches the highlight.
Key points
- Transform: scale() magnifies the image without changing the layout.
- Overflow: hidden on the container to prevent images from outbound.
- The transform-originals determine the center of enlargement.
- GetBoundingClientRect helps calculate the position of the cursor relative to the image.
- Mousemove events can dynamically update the transform-originals.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.