Pure CSS slide show for Image

by Pankaj Sapkal

HTML

<div class="slider">
  <img class='photo'  src="https://artdoxa-images.s3.amazonaws.com/uploads/artwork/image/123468/watermark_Your_Natural_Beauty_wallpaper.jpg" alt="" />
  <img class='photo'  src="https://artdoxa-images.s3.amazonaws.com/uploads/artwork/image/123467/watermark_YNP11_107.JPG" alt="" />
  <img class='photo'  src="https://artdoxa-images.s3.amazonaws.com/uploads/artwork/image/123466/watermark_wall-c-snyp-beauty-natural_by_exportinart.jpg" alt="" />
  <img class='photo'  src="https://artdoxa-images.s3.amazonaws.com/uploads/artwork/image/123467/watermark_YNP11_107.JPG" alt="" />
</div>

CSS

.slider{
  margin:50px auto;
  width:100%;
  height:300px;
  overflow:hidden;
  position:relative;

}
.photo{
  position:absolute;
  -webkit-animation:round 16s infinite;
  opacity:0;
  width:100%;
  
}
@-webkit-keyframes round{   
  25%{opacity:1;}
  40%{opacity:0;}
} 

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