ImagesLesson 59Free preview

Modal Images

This lesson is part of How To · All levels

Summary

The image capital magnifies the image above the dark layer when the thumbnail is clicked, without moving the page. Users can close the large view by clicking the cross button or the outer area. This pattern is suitable for product galleries, portfolios, and photo previews.

Key points

The capital uses position: fixed and inset: 0 to cover the entire viewport.
The dark background helps the big picture stand out.
The images in the capital are limited to max-width and max-height so they don't get cut.
Click on the capital background to close by checking event.target.
Cursor: zoom-in gives the indication that the image can be enlarged.

Full lesson

Code examples and quizzes

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