Skip to main content

Home Page Patterns Lightbox

Lightbox

A full-screen overlay that displays a single image or video.

A lightbox dims the entire page and shows a media item — usually an image or video — at maximum size in the center. The user can close it with X, Esc, or by clicking outside.

Lightboxes are perfect for image galleries where the thumbnails are tiny and users want to see detail. Add prev/next arrows for browsing. Always show a close affordance — never trap the user.

Related terms