<a href="https://manu.ninja/">
  <img class="thumbnail" width="320" height="180" src="https://static.manu.ninja/files/big_buck_bunny_720p_h264_thumbnail.jpg">
  <img class="slides" width="1280" height="180" src="https://static.manu.ninja/files/big_buck_bunny_720p_h264_slides.jpg">
</a>
a {
  float: left;
  position: relative;
  overflow: hidden;
  &:hover {
    .slides {
      display: block;
      animation: slides 5s steps(5) infinite;
    }
  }
}
.slides {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
@keyframes slides {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-320px * 5);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.