JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<div class="container">
  <div class="head" style="text-align:center">
    <h1>
      Example Slide Show
    </h1>
  </div>
  <div class="content" style="text-align:center">
    <h1>
      Here is some cool content....
    </h1>
  </div>
  <div class="tech-slideshow">
    <div class="mover-1"></div>
    <div class="mover-2"></div>
    <div class="mover-3"></div>
  </div>
</div>

CSS

.tech-slideshow {
  height: 200px;
  max-width: 800px;
  margin: 100px auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.tech-slideshow > div {
  height: 200px;
  width: 100px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/collage.jpg);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
  animation: moveSlideshow 12s linear infinite;
}
.tech-slideshow .mover-2 {
  opacity: 0;
  transition: opacity 0.5s ease-out;
  background-position: 0 -200px;
  animation: moveSlideshow 15s linear infinite;
}


@keyframes moveSlideshow {
  100% { 
    transform: translateX(-66.6666%);  
  }
}