Slideshow Zoom+Fade

by davidxmartins

HTML

<div class="pic-wrapper">
  <figure class="pic-1"></figure>
  <figure class="pic-2"></figure>
  <figure class="pic-3"></figure>
  <figure class="pic-4"></figure>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.pic-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  
  /* animation */
  
  animation: slideShow 24s linear infinite 0s;
  -o-animation: slideShow 24s linear infinite 0s;
  -moz-animation: slideShow 24s linear infinite 0s;
  -webkit-animation: slideShow 24s linear infinite 0s;
}

figcaption {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
}

.pic-1 {
  opacity: 1;
  background: url(https://picsum.photos/1600/900?random=1) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-2 {
  animation-delay: 6s;
  -o-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -webkit-animation-delay: 6s;
  background: url(https://picsum.photos/1600/900?random=2) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-3 {
  animation-delay: 12s;
  -o-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -webkit-animation-delay: 12s;
  background: url(https://picsum.photos/1600/900?random=3) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-4 {
  animation-delay: 18s;
  -o-animation-delay: 18s; /* For Opera */
  -moz-animation-delay: 18s; /* For Firefox */
  -webkit-animation-delay: 18s; /* For Chrome and Safari */
  background: url(https://picsum.photos/1600/900?random=4) no-repeat center center;
  -webkit-background-size: cover; /* For Chrome and Safari */
  -moz-background-size: cover; /* For Firefox */
  -o-background-size: cover; /* For Opera */
  background-size: cover;
}

/* keyframes */

@keyframes slideShow {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  5%, 25% {
    opacity: 1;
  }
 ...