<div id="stapel">
    <figure>
        <img src="http://www.webdesign-klamonfra.de/codeschnipsel/bilder600/Cottage.jpg" width="600"
             height="400" alt="Kleines Cottage">
        <figcaption>Kleines Cottage mit Reetdach</figcaption>
    </figure>
    <figure>
        <img src="http://www.webdesign-klamonfra.de/codeschnipsel/bilder600/Runch.jpg" width="600"
             height="400" alt="Weiler Runch">
        <figcaption>Der Weiler Runch</figcaption>
    </figure>
    <figure>
        <img src="http://www.webdesign-klamonfra.de/codeschnipsel/bilder600/Gerfalke.jpg" width="600"
             height="400" alt="Gerfalke">
        <figcaption>Gerfalke</figcaption>
    </figure>
    <figure>
        <img src="http://www.webdesign-klamonfra.de/codeschnipsel/bilder600/Wollkopfgeier.jpg" width="600"
             height="400" alt="Wollkopfgeier">
        <figcaption>Wollkopfgeier</figcaption>
    </figure>
    <figure>
        <img src="http://www.webdesign-klamonfra.de/codeschnipsel/bilder600/Lobiser-Schupfen.jpg" width="600"
             height="400" alt="Lobiser-Schupfen">
        <figcaption>Lobiser-Schupfen</figcaption>
    </figure>
    <div class="laden"></div>
    <div class="pause"></div>
</div>

#stapel {
    position: relative;
    background: #000;
    height: 25em;
    width: 37.5em;
    margin: 1em auto -2em;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;
    cursor: pointer;
    overflow: hidden;
}

#stapel figure {
    position: absolute;
    margin: 0;
    height: 25em;
    width: 37.5em;
    opacity: 0;
}

#stapel figcaption {
    position: relative;
    overflow: hidden;
    color: #fff;
    font: 1.3em/2.5 Verdana, Arial, serif;
    letter-spacing: .1em;
    text-align: center;
    max-width: 380px;
    margin: 0 auto;
    bottom: 50px;
    opacity: 0;
    transition: 1s;
}

#stapel figcaption:after {
    position: absolute;
    bottom: 10px;
    left: 0;
    top: 0;
    width: 100%;
    height: .1em;
    background: #fff;
    content: '';
    transition: transform .5s;
    transform: translate3d(-100%,0,0);
}

#stapel:hover figcaption,
#stapel:hover figcaption:after {
    opacity: 1;
    transform: translate3d(0,0,0);
}
}
.laden {
    position: relative;
    background: linear-gradient(90deg,#f00,#ffa500,#ff0,
                                #008000,#00f,#800080);
    width: 37.5em;
    height: .125em;
    bottom: -398px;
    animation: balken 6s ease-out infinite;
    z-index: 2;
}

@keyframes balken {
      0% {width:   0; opacity: 0;}
     10% {width:   0; opacity:.2;}
     80% {width:100%; opacity:.8;}
    100% {width:100%; opacity: 0;}
}
.pause {
    position: absolute;
    top: 5px;
    left: 570px;
    color: #eee;
    font: bolder 1.3em/2 Impact;
    opacity: 0;
    transition: .5s;
    z-index: 2;
}

.pause:after {
    content: 'I I';
}

#stapel:hover .pause {
    opacity: 1;
}










#stapel figure:nth-of-type(1) {
    animation: bild 30s ease-in-out infinite;
}
#stapel figure:nth-of-type(2) {
    animation: bild 30s 6s ease-in-out infinite;
}
#stapel figure:nth-of-type(3) {
    animation: bild 30s 12s ease-in-out infinite;
}
#stapel figure:nth-of-type(4) {
    animation: bild 30s 18s ease-in-out infinite;
}
#stapel figure:nth-of-type(5) {
    animation: bild 30s 24s ease-in-out infinite;
}

#stapel:hover figcaption,
#stapel:hover figcaption:after {
    opacity: 1;
    transform: translate3d(0,0,0);
}

@keyframes bild {
     6.66%,  20% {transform:rotate(360deg); opacity:1; z-index:1;}
    26.66%       {transform:rotate(180deg); opacity:0; z-index:0;}
        0%, 100% {transform:rotate(180deg); opacity:0; z-index:0;}
}