ImagesLesson 67Free preview

Image Overlay Slide

This lesson is part of How To · All levels

Summary

The image overlay slide pops up a text panel by sliding it from under the image. The panel starts outside the visible area using the transform, then moves to its original position when hovered.

Key points

The overlay is positioned absolute at the bottom of the container.
Transform: translateY(100%) hides the panel under the image.
Containers use overflow: hidden to keep the panels neatly hidden.
When the hover, the transform is converted to translateY(0).
The transition on the transform produces smooth slide motion.

Full lesson

Code examples and quizzes

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