CSS AdvancedLesson 63Free preview

CSS Image Modal

This lesson is part of CSS · All levels

Summary

Image capital is an overlay box that displays large-scale photos above the page content. With CSS alone, this can be realized with a pseudo-class `:target` that reacts when a page URL points to a particular fragment. The close button is quite a link that leads to the ID outside the overlay so that the capital is closed again.

Key points

The `:target` technique uses the URL fragment (#id) to open the overlay
Overlay uses `position: fixed` with `inset: 0` to cover the screen
Large `z-index` ensures capital is above page content
The close button is a link to another ID so that `:target` no longer fits

Full lesson

Code examples and quizzes

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