Create an Image Portfolio/Gallery with HTML and CSS

This "image portfolio" requires no JavaScript to function. The only downside to this is that all the images must download when the page is loaded so it makes sense just to use the large images for thumbnails. With JavaScript, images can be loaded as they are viewed.

This works thanks to the target pseudo-class selector which works with the id of the HTML element through the fragment specified in the address of the page (URI).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Image Portfolio</title>
	<style>

		/* MOBILE CSS */

		*, *::before, *::after {
			box-sizing: border-box;
		}
		body {
			margin: 0;
			padding: 0;
			font-family: sans-serif;
			background-color: #222;
		}
		img {
			display: block;
			max-width: 100%;
		}
		.portfolio-thumbs {
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
		}
		.portfolio-thumb {
			border: 1px solid #222;
			text-align: center;
			width: 160px;
		}
		.portfolio-item-sub a {
			color: #ff6a00;
			padding: 10px 20px;
			border: 3px solid #ff6a00;
			text-decoration: none;
			text-transform: uppercase;
		}
			.portfolio-item-sub a:hover {
				color: #fff;
				background-color: #ff6a00;
			}
		.portfolio-large-item {
			position: fixed;
			display: flex;
			visibility: hidden;
			align-items: center;
			justify-content: center;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background-color: rgba(0,0,0,0.75);
			color: #eee;
			transform: scale(0);
			transition: .25s ease-in-out;
		}
			.portfolio-large-item:target { /* here's all the magic to making this work without JavaScript */
				visibility: visible;
				transform: scale(1);
			}
		.portfolio-item-content {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #000;
		}
			.portfolio-item-content img {
				border-radius: 16px;
			}
			.portfolio-item-content p {
				padding: 0 16px;
			}
		.portfolio-item-close {
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 32px;
			height: 32px;
			top: 0;
			right: 0;
			border-radius: 50%;
			background-color: #ff6a00;
			color: #fff;
			text-decoration: none;
			cursor: pointer;
		}
		.portfolio-item-close::after {
			content: "X";
			font-weight: bold;
			font-size: 24px;
		}

		/* DESKTOP CSS */

		@media (min-width: 768px) {
			.portfolio-thumbs { /* center the thumbnails on the screen; this can be removed */
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	</style>
</head>
<body>
	<div class="portfolio-thumbs">

		<div class="portfolio-thumb">
			<a href="#portfolio-large-item-1"><img src="https://picsum.photos/id/1001/800" /></a>
		</div>

		<div class="portfolio-thumb">
			<a href="#portfolio-large-item-2"><img src="https://picsum.photos/id/1002/800" /></a>
		</div>

		<div class="portfolio-thumb">
			<a href="#portfolio-large-item-3"><img src="https://picsum.photos/id/1003/800" /></a>
		</div>

		<div class="portfolio-thumb">
			<a href="#portfolio-large-item-4"><img src="https://picsum.photos/id/1004/800" /></a>
		</div>

		<div class="portfolio-thumb">
			<a href="#portfolio-large-item-5"><img src="https://picsum.photos/id/1015/800" /></a>
		</div>

		<div class="portfolio-thumb">
			<a href="#portfolio-large-item-6"><img src="https://picsum.photos/id/1006/800" /></a>
		</div>

		<div class="portfolio-thumb">
			<a href="#portfolio-large-item-7"><img src="https://picsum.photos/id/1027/800" /></a>
		</div>

		<div class="portfolio-thumb">
			<a href="#portfolio-large-item-8"><img src="https://picsum.photos/id/1008/800" /></a>
		</div>

		<div class="portfolio-thumb">
			<a href="#portfolio-large-item-9"><img src="https://picsum.photos/id/1009/800" /></a>
		</div>

		<div class="portfolio-thumb">
			<a href="#portfolio-large-item-10"><img src="https://picsum.photos/id/1010/800" /></a>
		</div>

	</div>

	<div class="portfolio-large-items">

		<div class="portfolio-large-item" id="portfolio-large-item-1">
			<div class="portfolio-item-content">
				<a href="#!" class="portfolio-item-close"></a> <!-- NOTICE href="#!" -->
				<img src="https://picsum.photos/id/1001/800" />
				<h3 class="portfolio-item-title">#1</h3>
				<p class="portfolio-item-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

		<div class="portfolio-large-item" id="portfolio-large-item-2">
			<div class="portfolio-item-content">
				<a href="#!" class="portfolio-item-close"></a>
				<img src="https://picsum.photos/id/1002/800" />
				<h3 class="portfolio-item-title">#2</h3>
				<p class="portfolio-item-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

		<div class="portfolio-large-item" id="portfolio-large-item-3">
			<div class="portfolio-item-content">
				<a href="#!" class="portfolio-item-close"></a>
				<img src="https://picsum.photos/id/1003/800" />
				<h3 class="portfolio-item-title">#3</h3>
				<p class="portfolio-item-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

		<div class="portfolio-large-item" id="portfolio-large-item-4">
			<div class="portfolio-item-content">
				<a href="#!" class="portfolio-item-close"></a>
				<img src="https://picsum.photos/id/1004/800" />
				<h3 class="portfolio-item-title">#4</h3>
				<p class="portfolio-item-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

		<div class="portfolio-large-item" id="portfolio-large-item-5">
			<div class="portfolio-item-content">
				<a href="#!" class="portfolio-item-close"></a>
				<img src="https://picsum.photos/id/1015/800" />
				<h3 class="portfolio-item-title">#5</h3>
				<p class="portfolio-item-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

		<div class="portfolio-large-item" id="portfolio-large-item-6">
			<div class="portfolio-item-content">
				<a href="#!" class="portfolio-item-close"></a>
				<img src="https://picsum.photos/id/1006/800" />
				<h3 class="portfolio-item-title">#6</h3>
				<p class="portfolio-item-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

		<div class="portfolio-large-item" id="portfolio-large-item-7">
			<div class="portfolio-item-content">
				<a href="#!" class="portfolio-item-close"></a>
				<img src="https://picsum.photos/id/1027/800" />
				<h3 class="portfolio-item-title">#7</h3>
				<p class="portfolio-item-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

		<div class="portfolio-large-item" id="portfolio-large-item-8">
			<div class="portfolio-item-content">
				<a href="#!" class="portfolio-item-close"></a>
				<img src="https://picsum.photos/id/1008/800" />
				<h3 class="portfolio-item-title">#8</h3>
				<p class="portfolio-item-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

		<div class="portfolio-large-item" id="portfolio-large-item-9">
			<div class="portfolio-item-content">
				<a href="#!" class="portfolio-item-close"></a>
				<img src="https://picsum.photos/id/1009/800" />
				<h3 class="portfolio-item-title">#9</h3>
				<p class="portfolio-item-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

		<div class="portfolio-large-item" id="portfolio-large-item-10">
			<div class="portfolio-item-content">
				<a href="#!" class="portfolio-item-close"></a>
				<img src="https://picsum.photos/id/1010/800" />
				<h3 class="portfolio-item-title">#10</h3>
				<p class="portfolio-item-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			</div>
		</div>

	</div>
</body>
</html>