Pure CSS Photo Gallery

A simple photo gallery for web. Click a thumbnail, see a big picture. Click again to see the thumbnails.

This is done with just CSS, no JavaScript and no external libraries. In fact, the whole HTML+CSS is less than 60 lines.

CSS target: - the Secret Sauce

CSS :target selector is activated when the element is linked with id.

Show the Big Photo

In this photo gallery, each thumbnail is a link to an element id.

<a href="#IMG_7216.jpg">
	<img src="img/thumb/IMG_7216.jpg" alt="">
</a>

The target of this link is an element with the id. It is hidden at the start.

<a href="#gallery" class=tlightbox id=IMG_7216.jpg>
	<img src="img/IMG_7216.jpg" alt="">
</a>

Using the magic of CSS target, we can show the big photo when the link mentions it by id. So this CSS (".tlightbox:target") is only active when browser location bar shows URL https://terokarvinen.com/demo/purecss-gallery/#IMG_7216.jpg

.tlightbox:target {
	/* URL ends with #IMG_7216.jpg */
}

Hide the Big Photo

As soon as we follow any other anchor (#tero), the anchor is no longer the id of the big image. So, the :target CSS selecter is no longer active, and the big image is hidden.

That's why the big image is a link to #gallery.

<a href="#gallery" class=tlightbox id=IMG_7050.jpg><img src="img/IMG_7050.jpg" alt=""></a>

So, now you know the secret of CSS target:. Try the demo and read the code.

HTML and Inline CSS - Under 60 Lines, No Includes

<!doctype html>
<html lang="en">
<head>
	<title>Pure CSS tlightbox - a Photo Gallery without JavaScript</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		html, body { position: relative; top: 0; left: 0; bottom: 0; right: 0; margin: 0; }

		.tlightbox {
			display: none;
		}

		.tlightbox:target {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			display: grid;
			place-items: center;
			align-content: center;
			background: black;
			color: white;
			border: 0;
			z-index: 42;
		}

		.tlightbox IMG { /* to fit the whole image on small screen */
			max-height: 100%;
			max-width: 100%;
		}
		
	</style>
</head>
<body>
	<h1 id="gallery">Pure CSS tlightbox - a Photo Gallery without JavaScript</h1>
	<a href="#IMG_7050.jpg"><img src="img/thumb/IMG_7050.jpg" alt=""></a>
	<a href="#IMG_7094.jpg"><img src="img/thumb/IMG_7094.jpg" alt=""></a>
	<a href="#IMG_7137.jpg"><img src="img/thumb/IMG_7137.jpg" alt=""></a>
	<a href="#IMG_7152.jpg"><img src="img/thumb/IMG_7152.jpg" alt=""></a>
	<a href="#IMG_7207.jpg"><img src="img/thumb/IMG_7207.jpg" alt=""></a>
	<a href="#IMG_7209.jpg"><img src="img/thumb/IMG_7209.jpg" alt=""></a>
	<a href="#IMG_7216.jpg"><img src="img/thumb/IMG_7216.jpg" alt=""></a>

	<a href="#gallery" class=tlightbox id=IMG_7050.jpg><img src="img/IMG_7050.jpg" alt=""></a>
	<a href="#gallery" class=tlightbox id=IMG_7094.jpg><img src="img/IMG_7094.jpg" alt=""></a>
	<a href="#gallery" class=tlightbox id=IMG_7137.jpg><img src="img/IMG_7137.jpg" alt=""></a>
	<a href="#gallery" class=tlightbox id=IMG_7152.jpg><img src="img/IMG_7152.jpg" alt=""></a>
	<a href="#gallery" class=tlightbox id=IMG_7207.jpg><img src="img/IMG_7207.jpg" alt=""></a>
	<a href="#gallery" class=tlightbox id=IMG_7209.jpg><img src="img/IMG_7209.jpg" alt=""></a>
	<a href="#gallery" class=tlightbox id=IMG_7216.jpg><img src="img/IMG_7216.jpg" alt=""></a>
	
	<p><small>Code copyright 2021 <a href="http://TeroKarvinen.com">Tero Karvinen</a>. Photos copyright 2020 <a href="http://bionicmechanic.com">Kimmo Karvinen</a></small></p>
</body>
</html>

Adminstrivia: Updated: improved copy, removed image lazy loading.