#pho {
  display: flex;
  overflow: hidden;
  height: 50vw;
  background: #111;
}

#pho:hover img {
  opacity: 0.5;
}

#pho img {
  max-width: 100%;
  vertical-align: middle;
  border: 1px solid black;
  box-sizing: border-box;
  transition: opacity 0.2s;
}

#pho img:hover {
  opacity: 1;
}

#pho .column {
  -webkit-animation: var(--animation, none) 16s infinite linear;
          animation: var(--animation, none) 16s infinite linear;
}

#pho .column:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

#pho .column:nth-of-type(odd) {
  align-self: flex-end;
  --direction: 50%;
}

@-webkit-keyframes slide {
  to {
    transform: translateY(var(--direction, -50%));
  }
}

@keyframes slide {
  to {
    transform: translateY(var(--direction, -50%));
  }
}