<!-- 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>
  <a href="#img2">
    <img src="https://unsplash.it/800/400?image=134" class="thumbnail">
  </a>
  <a href="#img3">
    <img src="https://unsplash.it/800/400?image=22" class="thumbnail">
  </a>
</div>

<!-- lightbox container hidden with CSS -->
<a href="#" class="lightbox" id="img1">
  <img src="https://unsplash.it/800/400?image=179">
</a>
<a href="#" class="lightbox" id="img2">
  <img src="https://unsplash.it/800/400?image=134">
</a>
<a href="#" class="lightbox" id="img3">
  <img src="https://unsplash.it/800/400?image=22">
</a>

$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;
}