ImagesLesson 68Free preview
Image Overlay Zoom
This lesson is part of How To · All levels
Summary
Image overlay zoom combines image magnification with the emergence of information layers while hover. The image is magnified using a transform scale, while the overlay appears through a change in opacity.
Key points
- Transform: scale(1.1) magnifies the image without changing the size of the layout.
- Overflow: hidden cutting out the image that comes out of the container.
- The transform-originals determine the center of enlargement.
- Overlay can appear alongside zoom effects.
- Transition makes changes in scale and opacity feel subtle.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.