JSFiddle - React, Tailwind, and code Playground

css3 cycle images advert banner

by Andrew Pougher

HTML

<section>
  <div class="ap-wrap">
    <img src="https://placehold.it/650x1450/ecc3e3/ffffff/" alt="image01" class="img-responsive">
    <img src="https://placehold.it/650x1450/ecfde3/ffffff/" alt="image01" class="img-responsive">
    <img src="https://placehold.it/650x1450/33cde3/ffffff/" alt="image01" class="img-responsive">
    <img src="https://placehold.it/650x1450/e0cde3/ffffff/" alt="image01" class="img-responsive">
    <img src="https://placehold.it/650x1450/e1cde3/ffffff/" alt="image01" class="img-responsive">
    <img src="https://placehold.it/650x1450/ec3de3/ffffff/" alt="image01" class="img-responsive">
    <img src="https://placehold.it/650x1450/eddde3/ffffff/" alt="image01" class="img-responsive">
    <img src="https://placehold.it/650x1450/efcde3/ffffff/" alt="image01" class="img-responsive">
    <img src="https://placehold.it/650x1450/e55de3/ffffff/" alt="image01" class="img-responsive">
    <img src="https://placehold.it/650x1450/e52de3/ffffff/" alt="image01" class="img-responsive">

    <div class="ap-overlay">
      <span>Summer <strong>2016</strong></span>
    </div>
  </div>
</section>

CSS

.ap-wrap {
  width: 333px;
  height: 500px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.ap-wrap img {
  top: 0px;
  left: 0px;
  position: absolute;
  -webkit-animation: showMe 0.8s linear infinite 0s forwards;
  -moz-animation: showMe 0.8s linear infinite 0s forwards;
  -o-animation: showMe 0.8s linear infinite 0s forwards;
  -ms-animation: showMe 0.8s linear infinite 0s forwards;
  animation: showMe 0.8s linear infinite 0s forwards;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  -ms-animation-play-state: paused;
  animation-play-state: paused;
}

.ap-wrap img:nth-child(1) {
  z-index: 9;
}

.ap-wrap img:nth-child(2) {
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  -o-animation-delay: 0.1s;
  -ms-animation-delay: 0.1s;
  animation-delay: 0.1s;
  z-index: 8;
}

.ap-wrap img:nth-child(3) {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  -ms-animation-delay: 0.2s;
  animation-delay: 0.2s;
  z-index: 7;
}

.ap-wrap img:nth-child(4) {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
  -ms-animation-delay: 0.3s;
  animation-delay: 0.3s;
  z-index: 6;
}

.ap-wrap img:nth-child(5) {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  -ms-animation-delay: 0.4s;
  animation-delay: 0.4s;
  z-index: 5;
}

.ap-wrap img:nth-child(6) {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  -ms-animation-delay: 0.5s;
  animation-delay: 0.5s;
  z-index: 4;
}

.ap-wrap img:nth-child(7) {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  -ms-nimation-delay: 0.6s;
  animation-delay: 0.6s;
  z-index: 3;
}

.ap-wrap img:nth-child(8) {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  -o-animation-delay: 0.7s;
 ...