CSS Lightbox

Full-size image overlay using the :target pseudo-class — no JavaScript.

Published June 13, 2026

Demo

HTML
				
				<!-- Thumbnail link -->
<a href="#lightbox-1">
  <img src="thumbnail.jpg" alt="Photo">
</a>

<!-- Lightbox overlay -->
<div id="lightbox-1" class="lb-overlay">
  <a href="#" class="lb-close">✕</a>
  <img src="full-size.jpg" alt="Photo">
</div>

			

CSS
				
				.lb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  z-index: 999;
  align-items: center;
  justify-content: center;
}

.lb-overlay:target {
  display: flex;
}

			

How it works

Each thumbnail is a link pointing to an id on a lightbox overlay: <a href="#img1">. When clicked, the browser changes the URL hash and CSS applies :target styles to the matching overlay, showing it. Clicking the overlay's <a href="#"> close button removes the hash, hiding it again. The overlay uses position: fixed to cover the viewport.