<!-- thumbnail image wrapped in a link -->
<div class="thumb-wrapper">
  <a href="#img1">
    <img src="https://unsplash.it/800/400?image=179" class="thumbnail">
  <a href="#img2">
    <img src="https://unsplash.it/800/400?image=134" class="thumbnail">
  <a href="#img3">
    <img src="https://unsplash.it/800/400?image=22" class="thumbnail">

<!-- lightbox container hidden with CSS -->
<a href="#" class="lightbox" id="img1">
  <img src="https://unsplash.it/800/400?image=179">
<a href="#" class="lightbox" id="img2">
  <img src="https://unsplash.it/800/400?image=134">
<a href="#" class="lightbox" id="img3">
  <img src="https://unsplash.it/800/400?image=22">
$thumbnail-size: 80px;
$background-color: rgba(0,0,0,.8);

.thumbnail {
  max-width: $thumbnail-size;
  margin: 1em;
  float: left;

.lightbox {
  // Hide lightbox image
	display: none;

	// Position/style of lightbox
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: $background-color;

.lightbox img {
	/// Pad the lightbox image
	max-width: 90%;
	max-height: 80%;
	margin-top: 2%;

.lightbox:target {
	// Remove default outline and unhide lightbox
	outline: none;
	display: block;

body {
  margin: 1em;
  text-align: center;

.thumb-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.