JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<div id="tech-slideshow">
    <div id="tech-slideshow-1"></div>
    <div id="tech-slideshow-2"></div>
</div>

CSS

#tech-slideshow {
    height: 200px;
    position: relative;
    overflow: hidden;
}
#tech-slideshow > div {
    height: 200px;
    width: 2526px;
    background: url(http://cl.ly/9BJG/collage.jpg);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    
    -moz-transition:  opacity 0.5s ease-out; 
       -o-transition: opacity 0.5s ease-out; 
  -webkit-transition: opacity 0.5s ease-out; 
      -ms-transition: opacity 0.5s ease-out; 

    -webkit-animation: moveSlideshow 60s linear infinite;
    -moz-animation: moveSlideshow 60s linear infinite;
    
    -webkit-transform: translate3d(0,0,0); /* Performance? */

}
#tech-slideshow #tech-slideshow-1 {
    background-position: 0 200px;
    -webkit-animation: moveSlideshow 20s linear infinite;
    -moz-animation: moveSlideshow 20s linear infinite;
}
#tech-slideshow:hover #tech-slideshow-2 {
    opacity: 0;
}

@-webkit-keyframes moveSlideshow {
    0% { left: 0; }
    100% { left: -1684px; }
}
@-moz-keyframes moveSlideshow {
    0% { left: 0; }
    100% { left: -1684px; }
}