ImagesLesson 66Free preview
Image Overlay Fade
This lesson is part of How To · All levels
Summary
Image overlay fade displays a layer of text above the image that appears slowly as the cursor is directed. The overlay is placed absolutely inside the image container, and then its opacity is changed from 0 to 1. The fade effect gives a smooth impression and keeps the image clean when it's not active.
Key points
- The image container must be position: relative so that the overlay is aligned with it.
- The overlay uses position: absolute and inset: 0 to cover the image.
- Opacity: 0 hides the overlay, then opacity: 1 while hover.
- Transition: opacity makes the change look smooth.
- The semi-transparent background helps the text stay in contrast.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.