JSFiddle - React, Tailwind, and code Playground

HTML

<figure class="photo-3d-grid">
  <a href="#">
    <img src="http://ryanspring.ca/demo/img/68000_project.png">
  </a>
  <a href="#">
    <img src="http://ryanspring.ca/demo/img/dashboard_project.png">
  </a>
  <a href="">
    <img src="http://ryanspring.ca/demo/img/rbcone_project.png">
  </a>
  <br />
  <a href="">
    <img src="http://ryanspring.ca/demo/img/4bitclovers_project.png">
  </a>
  <a href="">
    <img src="http://ryanspring.ca/demo/img/speeddating_project.png">
  </a>
  <a href="">
    <img src="http://ryanspring.ca/demo/img/chess_project.png">
  </a>
  <br />
  <a href="">
    <img src="http://ryanspring.ca/demo/img/trafficsimulator_project.png">
  </a>
  <a href="">
    <img src="http://ryanspring.ca/demo/img/getthat_project.png">
  </a>
  <a href="">
    <img src="http://ryanspring.ca/demo/img/roboticarm_project.png">
  </a>
</figure>

SCSS

figure.photo-3d-grid {
  transform: rotateX(50deg) rotateZ(25deg);
  transform-style: preserve-3d;
  a {
    transform-style: preserve-3d;
    position: relative;
    display: inline-block;
    margin: 10px;
      transition: all 250ms ease;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0.5;
      transition: opacity 500ms ease;
      background: linear-gradient(#fff, transparent);
    }
    &:hover {
      &::after {
        opacity: 0;
      }
      img {
      }
      transform: translateZ(5px);
    }
    img {
      position: relative;
      max-width: 250px;
      box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
      transform: translateZ(0);
    }
  }
}

body {
  transform-style: preserve-3d;
  perspective: 2000px;
}