MoreLesson 238Free preview

Zoom Hover

This lesson is part of How To · All levels

Summary

The zoom effect when the hover makes the image or card feel more alive when the cursor approaches. Its main technique is to transform transform and give it transition so that the change goes smoothly. Pack the elements with overflow containers: hidden so that the bulking part does not come out of the frame.

Key points

Transform: scale(1.1) enlarges the element without changing the flow of the layout around it.
Transition on transform makes a smooth zoom animation; a duration of 0.2-0.4 seconds is usually sufficient.
Overflow: hidden on the container to prevent the magnified image from floating.
The transform-originals determine the reference point of the enlargement, e.g. center or top left.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.