html {
  background: url("https://64.media.tumblr.com/tumblr_m695pquFMt1rqfhi2o1_500.gif");
  background-size: cover;
  background-position: 50% 35%;
}

.container {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.reveal-tile {
  box-sizing: border-box;
  width: 5%;
  border: 1px solid #333;
  background: black;
  -webkit-animation: reveal 10ms forwards;
          animation: reveal 10ms forwards;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

.reveal-tile:hover, .reveal-tile:active {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

@-webkit-keyframes reveal {
  100% {
    opacity: 0;
  }
}

@keyframes reveal {
  100% {
    opacity: 0;
  }
}