<ul class="gallery">
  <li>
    <figure>
      <a href="#"><img src="https://images.unsplash.com/photo-1539137571959-2fef8104f030" alt="Gallery item"></a>
      <figcaption>
        <h1>Hawaiian Islands</h1>
        <p>by Logan Lambert</p>
      </figcaption>
    </figure>
  </li>
  <li class="tall">
    <figure>
      <a href="#"><img src="https://images.unsplash.com/photo-1539054588416-1f7089399ca3" alt="Gallery item"></a>
      <figcaption>
        <h1>Castle in the Sky</h1>
        <p>by Shounen21</p>
      </figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <a href="#"><img src="https://images.unsplash.com/photo-1539013646821-b8c1e125b390" alt="Gallery item"></a>
      <figcaption>
        <h1>Sublimate of Materiality</h1>
        <p>by Andras Kovacs</p>
      </figcaption>
    </figure>
  </li>
  <li class="wide">
    <figure>
      <a href="#"><img src="https://images.unsplash.com/photo-1539025880297-e054842a8290" alt="Gallery item"></a>
      <figcaption>
        <h1>Reflection, sunshine, shadow and rock HD</h1>
        <p>by Salmen Bejaoui</p>
      </figcaption>
    </figure>
  </li>
  <li class="tall">
    <figure>
      <a href="#"><img src="https://images.unsplash.com/photo-1538973430467-f2e0297c8f46" alt="Gallery item"></a>
      <figcaption>
        <h1>Enchantment</h1>
        <p>by Casey Horner</p>
      </figcaption>
    </figure>
  </li>
  <li>
    <figure>
      <a href="#"><img src="https://images.unsplash.com/photo-1538942242243-71708b9bb270" alt="Gallery item"></a>
      <figcaption>
        <h1>Torres</h1>
        <p>by Benjamin Kraus</p>
      </figcaption>
    </figure>
  </li>
</ul>

/* Layout specific styles. */
body {
  padding: 1rem;
}

.gallery {
  display: grid;
  list-style-type: none;
  padding: 0;
  margin: 0;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 300px;
  grid-auto-flow: dense;
}

.gallery li figure {
  margin: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

.wide {
  grid-column: span 2;
}

.tall {
  grid-row: span 2;
}

img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Hover effect specific styles. */
.gallery li figure {
  overflow: hidden;
}

.gallery img {
  transition: all .3s ease-in-out;
  transform: scale(1.2);
}

.gallery figure figcaption {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  display: grid;
  align-content: center;
  text-align: center;
  pointer-events: none;
  border: 1px solid #fff;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
  transition: all .3s ease-in-out;
  transform: scale(1.2);
}

.gallery figure h1,
.gallery figure p {
  opacity: 0;
  transition: all .4s;
}

.gallery figure h1 {
  transform: translate3d(0, -1rem, 0);
  margin: 0;
  font-size: 21px;
}


.gallery figure p {
  font-size: 13px;
  transform: translate3d(0, 1rem, 0);
}

.gallery figure:hover img {
  filter: grayscale(100%);
  transform: scale(1);
}

.gallery figure:hover figcaption {
  transform: scale(1);
}

.gallery figure:hover figcaption h1,
.gallery figure:hover figcaption p {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}