JSFiddle - React, Tailwind, and code Playground

by haithamsboui

HTML

<div class="tech-slideshow"><div class="market-widget-item" style="margin: 0px 10px;display: inline-block"><div class="lozad" style="background:black;width: 32px; height: 32px; border-radius: 50%; display: inline-block; background-size: contain; background-position: center center;" data-loaded="true"></div><div style="display: inline-block;margin: 0 5px;vertical-align: text-bottom;line-height:32px;">felfel</div><div style="display: inline-block;vertical-align: text-bottom;line-height:32px;">55
                    ~ 555</div></div>
                    </div>

CSS

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

.tech-slideshow > div {
  height: 200px;
  width: 2526px;
  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;
}
.tech-slideshow:hover .mover-2 {
  opacity: 1;
}

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