JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<div>

<img src="https://images.unsplash.com/photo-1533134957610-83185986f38b?ixlib=rb-0.3.5&s=53d07cdd8b1dede5489ca7ce069d90c0&auto=format&fit=crop&w=1500&q=80">

<img src="https://images.unsplash.com/photo-1533117287691-bdaa239829cf?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1bec35b9f33244a3e38561b29d7a6558&auto=format&fit=crop&w=1500&q=80">

<img src="https://images.unsplash.com/photo-1533130061792-64b345e4a833?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f704f09189904f9e8b4098df26c3bbb2&auto=format&fit=crop&w=1500&q=80">

</div>

CSS

body, html{margin:0;}

div{
    counter-reset: images;
}
@keyframes crossfade {
    from { opacity: 0; }
    to {   opacity: 1; }
}
div img{
    counter-increment: images;
    animation-name: crossfade;
    animation-duration: 1s;
    animation-delay: calc(  counter(images) * 5s );
    
}

img{
   opacity: 0;
  max-width: 98vw;
  max-height: 98vh;
  margin-left: 1vw;
  margin-right: 1vw;
  margin-top: 1vh;
  margin-bottom: 1vh;
  
  position: absolute;
  top: 1vh;
  left: 1vw;
}