CSS Background Auto Play Slider

Question

I am aiming to build a background image slider / fade in - fade out javascript and I am stuck on the CSS part.

I have the following code:

<div class="col-md-3">
    <div class="feature">
        <div class="feature-header slide-0" style="background-image: url('http://placehold.it/125/150')">
            <div class="feature-meta">
                 <i class="fa fa-camera"></i> 3
            </div>
        </div>
        <div class="feature-header slide-1" style="background-image: url('http://placehold.it/125/150')">
             <div class="feature-meta">
                 <i class="fa fa-camera"></i> 3
             </div>
        </div>
        <div class="feature-header slide-2" style="background-image: url('http://placehold.it/125/150')">
             <div class="feature-meta">
                  <i class="fa fa-camera"></i> 3
             </div>
        </div>
        <div class="feature-body">
            <h2>JK Simmons</h2>
            <p>JK Simmons 'Whiplash' interview</p>
            <a href="#" class="btn btn-ihub btn-block">View</a>
        </div>
    </div>
</div>

What I would like to do here is stack the three divs with background images in such a way that the images can fade in and out showing the user all three images but one at a time.

I need help with the CSS on this, the javascript I think I am ok on.

Thanks

Answer 1

Here you go, Erswell.

Online JSfiddle Demo.

Now a days you want this; pure CSS3 animation (no JS).

.slide {
    position:absolute;
}

.slide:nth-child(1) {
    -webkit-animation: fade 24s 0s infinite;
    z-index:40;
}

.slide:nth-child(2) {
    -webkit-animation: fade 24s 6s infinite;
    z-index:30;
}

.slide:nth-child(3) {
    -webkit-animation: fade 24s 12s infinite;
    z-index:20;
}

.slide:nth-child(4) {
    -webkit-animation: fade 24s 18s infinite; 
    z-index:10;
}

@-webkit-keyframes fade {
    0%{
      opacity: 1;
   }
   15% {
      opacity:1;
   }
   25%{
      opacity: 0;
   }
   90% {
      opacity:0;
   }
   100% {
      opacity:1;
   }
}

Answer 2

My first thought would be to use CSS animations, along with position: absolute to 'stack' the relevant elements in the correct place. This would give, as a demonstration, the following code (with the &ndash necessary in practice – vendor-prefixed CSS properties and rules omitted, showing only the standards-compliant non-prefixed version in the code here, though with vendor-prefixes in place in the demos):

/*
    because there are three elements we show each
    element for only the first 33% of the animation
    duration: */
@keyframes slideFade {
    0 {
        opacity: 1;
    }
    33% {
        opacity: 0;
    }
}
/*
    Setting the default properties: */
.feature-header {
    background-repeat: no-repeat;
    background-color: #fff;
    height: 150px;
    width: 150px;
    position: absolute;
}
/*
    setting a specific background-image for each element
    in order to make the transition visible: */       
.slide-0 {
    background-image: url(http://lorempixel.com/150/150/nightlife);

    /*
        animation-name ('slideFade'),
        animation-duration ('30s' -> 30 seconds),
        animation timing function ('linear'),
        animation-delay ('20s')
        animation-iteration-count ('infinite'):
    animation: slideFade 30s linear 20s infinite;
}
.slide-1 {
    background-image: url(http://lorempixel.com/150/150/nature);

    animation: slideFade 30s linear 10s infinite;
}
.slide-2 {
    background-image: url(http://lorempixel.com/150/150/people);

    animation: slideFade 30s linear 0 infinite;
}
.feature-body {
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-weight: bold;
    margin-left: 150px;
}

@-moz-keyframes slideFade {
  0 {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
}
@-webkit-keyframes slideFade {
  0 {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
}
@keyframes slideFade {
  0 {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
}
.feature-header {
  background-repeat: no-repeat;
  background-color: #fff;
  height: 150px;
  width: 150px;
  position: absolute;
}
.slide-0 {
  background-image: url(http://lorempixel.com/150/150/nightlife);
  -moz-animation: slideFade 30s linear 20s infinite;
  -webkit-animation: slideFade 30s linear 20s infinite;
  animation: slideFade 30s linear 20s infinite;
}
.slide-1 {
  background-image: url(http://lorempixel.com/150/150/nature);
  -moz-animation: slideFade 30s linear 10s infinite;
  -webkit-animation: slideFade 30s linear 10s infinite;
  animation: slideFade 30s linear 10s infinite;
}
.slide-2 {
  background-image: url(http://lorempixel.com/150/150/people);
  -moz-animation: slideFade 30s linear 0 infinite;
  -webkit-animation: slideFade 30s linear 0 infinite;
  animation: slideFade 30s linear 0 infinite;
}
.feature-body {
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-weight: bold;
  margin-left: 150px;
}

<div class="col-md-3">
  <div class="feature">
    <div class="feature-header slide-0">
      <div class="feature-meta"> <i class="fa fa-camera"></i> 3</div>
    </div>
    <div class="feature-header slide-1">
      <div class="feature-meta"> <i class="fa fa-camera"></i> 3</div>
    </div>
    <div class="feature-header slide-2">
      <div class="feature-meta"> <i class="fa fa-camera"></i> 3</div>
    </div>
    <div class="feature-body">
      <h2>JK Simmons</h2>

      <p>JK Simmons 'Whiplash' interview</p> <a href="#" class="btn btn-ihub btn-block">View</a>

    </div>
  </div>
</div>

External JS Fiddle demo, for experimentation.