A Lightbox Image Gallery Equivalent in CSS3

From Pro CSS Animation book. (Chapter 6, Page 97)

by Konstantin Rouda

HTML

<!-- A Lightbox Image Gallery Equivalent in CSS3 -->
  
 
  <dl class="gallery">
    
    <dt class="thumbnail-container">
      <a href="#img1">
        <img src="https://unsplash.it/500/400/?image=40" class="small-img" />
      </a>
    </dt>
    <dd id="img1" class="img-container">
      <a href="#">
        <img src="https://unsplash.it/500/400/?image=40" />
        <span class="img-container__caption">Cat's Nose</span>
      </a>
    </dd>
    
    <dt class="thumbnail-container">
      <a href="#img2">
        <img src="https://unsplash.it/500/400/?image=50" class="small-img" />
      </a>
    </dt>
    <dd id="img2" class="img-container">
      <a href="#">
        <img src="https://unsplash.it/500/400/?image=50" />
        <span class="img-container__caption">Goose on the boat</span>
      </a>
    </dd>
    
    <dt class="thumbnail-container">
      <a href="#img3">
        <img src="https://unsplash.it/500/400/?image=60" class="small-img" />
      </a>
    </dt>
    <dd id="img3" class="img-container">
      <a href="#">
        <img src="https://unsplash.it/500/400/?image=60" />
        <span class="img-container__caption">My working Place with display, tablet and other stuff.</span>
      </a>
    </dd>
    
  </dl>

CSS

HTML, BODY {
  min-height: 100%;
}

HTML {
  font-family: "Libre Baskerville", "Open Sans", sans-serif, serif;
  font-size: 100%;
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
   margin: 0;
  height: 200vh;
  color: #3a3d40;
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}

IMG {
  max-width: 100%;
}

/*Actual Style*/


.gallery {
  float: left;
}

.thumbnail-container {
  width: 250px;
}

.img-container {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0);
  visibility: hidden;
}

.img-container:target {
  visibility: visible;
  background: rgba(0, 0, 0, .3);
  transition: background 2s linear;
}

.img-container > A {
  position: relative;
  display: block;
  background: #fff;
  transition: box-shadow 0s ease-in;
}

.img-container:target > A {
  box-shadow: 0 0 8px 8px rgba(0, 0, 0, .3);
  transition-duration: 4s;
}

.img-container:target IMG {
  animation: blowup 3s forwards;
}

.img-container__caption {
  position: absolute;
  left: 20px; top: 20px;
  max-width: 70%;
  padding: .5em;
  background: rgba(0, 0, 0, .4);
  color: #fff;
  opacity: 0;
  transition: opacity .3s ease-in;
}

.img-container > A:hover .img-container__caption {
  opacity: 1;
}




@keyframes blowup {
  0% { width: 0; height: 0; opacity: 0; }
  30% { width: 640px; height: 0; opacity: 0; }
  60% { width: 640px; height: 480px; opacity: 0; margin: 20px; }
  100% { width: 640px; height: 480px; opacity: 1; margin: 20px; }
}