<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;
    color: #444;
    font: 1.5em/2.5 Verdana, Arial, serif;
    text-transform: uppercase;
    text-align: center;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, .3), 1px 1px 0 #505050;
    background: rgba(255, 255, 255, .7);
    border: 1px solid #fff;
    border-left: 0;
    height: 2.9em;
    width: 12.4em;
    bottom: 80px;
    left: -320px;
    transition: .5s;
}

#stapel:hover figcaption {
    left: 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 figure,
#stapel:hover .laden {
    animation-play-state: paused;
}

@keyframes bild {
      0%,    {top:-400px; opacity:0; z-index:0;}
      6.66%, {top:0;      opacity:1; z-index:1;}
     20%     {top:0;      opacity:1; z-index:1;}
     26.66%  {top: 400px; opacity:0; z-index:0;}
    100%     {top:-400px; opacity:0; z-index:0;}
}