.pic-wrapper {
  position: absolute;
  width: 300px;
  height: 300px;
  overflow: hidden;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -150px;
}

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

/* figurecaption {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
} */

.pic-1 {
  opacity: 0;
  background: url(../img/pic-1.jpg) 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(../img/pic-2.jpg) 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(../img/pic-3.png) 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;
  -moz--animation-delay: 18s;
  -webkit-animation-delay: 18s;
  background: url(../img/pic-4.png) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
/* keyframes */

@keyframes slideShow {
  0% {
    opacity: 1;
    transform: scale(1);
    -ms-transform: scale(1);
  }
  5% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale(1.2);
    -ms-transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(1);
    -ms-transformm: scale(1);
  }
}