CSS Background Auto Play Slider - html

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>
View
</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

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> View
</div>
</div>
</div>
External JS Fiddle demo, for experimentation.

Answer 2

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;
}
}