JSFiddle - React, Tailwind, and code Playground
HTML
<div id="tech-slideshow">
<div id="tech"></div>
</div>
CSS
body:hover
{
-webkit-animation-play-state: paused;
}
#tech-slideshow {
height: 200px;
width:600px;
position: relative;
overflow: hidden;
}
#tech{
height: 200px;
width: 2526px;
background: url(http://cl.ly/9BJG/collage.jpg);
position: absolute;
top: 0;
left:0;
height: 100%;
}
@-webkit-keyframes moveSlideshow {
0% { left: 0; }
100% { left: -1684px; }
}
#tech:hover{
-webkit-animation: moveSlideshow 10s linear infinite;
}