JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slideshow">
	<a class="photo" href="#"><img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" alt=""></a>
	<a class="photo" href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/a/a8/VST_images_the_Lagoon_Nebula.jpg" alt=""></a>
	<a class="photo" href="#"><img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" alt=""></a>
	<a class="photo" href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/a/a8/VST_images_the_Lagoon_Nebula.jpg" alt=""></a>		
</div>

CSS

#slideshow {
  margin:50px auto;
  width:60em;
  height:18em;
  overflow:hidden;
  border:0.4em solid;
  border-color: black;
  position:relative;
}
.photo {
  position:absolute;
  animation:round 16s infinite;
  -webkit-animation: round 16s infinite;
  opacity:0;
}
#slideshow:hover .photo {
	-webkit-animation-play-state: paused; 
    animation-play-state: paused; 
}
@keyframes round{   
  25%{opacity:1;}
  40%{opacity:0;}
} 
@-webkit-keyframes round {
	25%{opacity:1;}
  	40%{opacity:0;}
}

.photo:nth-child(4){animation-delay:0s;}
.photo:nth-child(3){animation-delay:4s;}
.photo:nth-child(2){animation-delay:8s;}
.photo:nth-child(1){animation-delay:12s;}
.photo:nth-child(4){-webkit-animation-delay:0s;}
.photo:nth-child(3){-webkit-animation-delay:4s;}
.photo:nth-child(2){-webkit-animation-delay:8s;}
.photo:nth-child(1){-webkit-animation-delay:12s;}