MoreLesson 185Free preview

Overlay Effect

This lesson is part of How To · All levels

Summary

This lesson discusses the overlay, a transparent layer of text or buttons that appears on an image or card. The overlay is usually positioned absolutely to cover the container and is hidden with opacity before displaying when hover or focus. The contrast of text and the accessibility of the content within the overlay are important to note.

Key points

Container overlay must position: relative and have an appropriate overflow
The overlay layer uses position: absolute with inset: 0 to cover the entire area
Use opacity and transition to smoothly overlay
Display overlay on the:hover and:focus-within so that the keyboard is accessible

Full lesson

Code examples and quizzes

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