body {
  background: #1d1d1d;
}
#photos {

}
.photo {
  position: relative;
  display: inline-block;
  margin: 0;
  vertical-align: bottom;
  z-index: 2;
  
  &:nth-of-type(even) a {
    animation-duration: 1s;
    animation-name: flips;
    animation-iteration-count: 3;
  }
  &:nth-of-type(odd) a.show {
    animation-duration: 1s;
    animation-name: flips2;
    animation-iteration-count: 3;
  }
}
.photo img {
  display: inline-block;
  width: 210px;
  margin: 0;
  vertical-align: bottom;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -50%;
  margin-top: -50%;
}
a {
  position: relative;
  width: 82px;
  height: 82px;
  overflow: hidden;
  display: block;
  margin: 0px;
  padding: 0px;
  transition: 0.3s;
  opacity: 0;
  transform: rotateY(360deg);
  transform-style: preserve-3d;
  
  &:hover {
    opacity: 1;
    transform: rotateY(-180deg);
  }
}
@keyframes flips {
  0% {
    transform: rotateY(360deg);
  }

  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes flips2 {
  0% {
    transform: rotateY(-360deg);
  }

  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-360deg);
  }
}