CSS Slider by Nillervision

HTML:

<div class="slideShow">
    <img class="placeHolder" src="slideshow/slide1.jpg" alt="my slideshow">
    <div class="layer1"></div>
    <div class="layer2"></div>
    <div class="layer3"></div>
    <div class="slideOverlay"><p>Photos by Søren Ditlevsen</p></div>
</div>

CSS:

@keyframes layer2Anim {
    0%{opacity:0;}
    17%{opacity:0;}
    33%{opacity:1;}
    50%{opacity:1;}
    67%{opacity:0;}
    100%{opacity:0;}
}
@keyframes layer3Anim {
    0%{opacity:0;}
    50%{opacity:0;}
    67%{opacity:1;}
    83%{opacity:1;}
    100%{opacity:0;}
}
.slideShow {
    position: relative;
}
.placeHolder {
    width: 100%;
    visibility: hidden;
}
.layer1, .layer2, .layer3 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-repeat: no-repeat;
}
.layer1 {
    background-image: url(slideshow/slide1.jpg);
}
.layer2 {
    background-image: url(slideshow/slide2.jpg);
    animation: layer2Anim 10s infinite;
}
.layer3 {
    background-image: url(slideshow/slide3.jpg);
    animation: layer3Anim 10s infinite;
}
.slideOverlay {
    background-image: url(slideshow/overlay.png);
    background-attachment: fixed;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.slideOverlay p {
    position: relative;
    font-size: 6vw;
    color: #fff;
    text-shadow: 3px 3px 6px #000;
    text-align: center;
    top: 30%;
}

Alternative keyframes:

Replace the keyframes with these if you want the images to slide, rather than fade in

@keyframes layer2Anim{
    0%{left:-100%;}
    17%{left:-100%;}
    33%{left:0;}
    50%{left:0;}
    67%{left:-100%;}
    100%{left:-100%;}
}
@keyframes layer3Anim{
    0%{left:100%;}
    50%{left:100%;}
    67%{left:0;}
    83%{left:0;}
    100%{left:100%}
}

Video Tutorial: