* {
    box-sizing: border-box ;
}

body {
  margin:0px;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  animation: bgchange 16s infinite;
}

.slideshow {
  position:relative;
  width:250px;
  height:300px;
}

.slideshow img {
  position:absolute;
  top:0px;
  left:0px;

  width:250px;
  height:300px;
  object-fit:cover;

  border-radius:100%;

  opacity:0;
  animation: fade 16s ease-in-out infinite;
}

@keyframes fade {
  0%{ opacity:0; }
  10%{ opacity:1; }
  25%{ opacity:1; }
  35%{ opacity:0; }
  100%{ opacity:0; }
}

.slideshow img:nth-child(1){ animation-delay: 0s; }
.slideshow img:nth-child(2){ animation-delay: 2s; }
.slideshow img:nth-child(3){ animation-delay: 4s; }
.slideshow img:nth-child(4){ animation-delay: 6s; }
.slideshow img:nth-child(5){ animation-delay: 8s; }
.slideshow img:nth-child(6){ animation-delay: 10s; }
.slideshow img:nth-child(7){ animation-delay: 12s; }
.slideshow img:nth-child(8){ animation-delay: 14s; }

@keyframes bgchange {

  0%   { background-color: lightpink; }
  12.5%{ background-color: lightcyan; }
  25%  { background-color: lightyellow; }
  37.5%{ background-color: plum; }
  50%  { background-color: antiquewhite; }
  62.5%{ background-color: lightpink}
  75%  { background-color: lightcyan; }
  87.5%{ background-color: lightyellow; }
  100% { background-color: plum; }

}