section.slideshow {
    position: relative;
    height: 436px;
    width: 600px;
    margin-bottom: 15px;
    overflow: hidden;
}

section.slideshow figure {
    margin: 0;
    position: absolute;
    opacity: 0;
}

section.slideshow figcaption {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 1em;
    padding: 1em;
    text-align: right;
    font-size: 1.3em;
    background-color: rgba(0, 0, 0, 0);
}

section.slideshow:hover figure {
    animation-play-state: paused;
}

/*                      name  | duration | linear | start | cycles   */
/*                            |          |        |       |          */
figure:nth-child(1) {/*       |          |        |       |          */
    -webkit-animation:  xfade     15s      linear     0s    infinite;
    animation:          xfade     15s      linear     0s    infinite;
}/*                           |          |        |       |          */
figure:nth-child(2) {/*       |          |        |       |          */
    -webkit-animation:  xfade     15s     linear     3s    infinite;
    animation:          xfade     15s     linear     3s    infinite;
}/*                           |          |        |       |          */
figure:nth-child(3) {/*       |          |        |       |          */
    -webkit-animation:  xfade     15s     linear     6s    infinite;
    animation:          xfade     15s     linear     6s    infinite;
}/*                           |          |        |       |          */
figure:nth-child(4) {/*       |          |        |       |          */
    -webkit-animation:  xfade     15s     linear     9s    infinite;
    animation:          xfade     15s     linear     9s    infinite;
}/*                           |          |        |       |          */
figure:nth-child(5) {/*       |          |        |       |          */
    -webkit-animation:  xfade     15s     linear     12s    infinite;
    animation:          xfade     15s     linear     12s    infinite;
}/*                           |          |        |       |          */
/*                            |          |        |       |          */

/* percent = 100 / duration */

@-webkit-keyframes xfade{
    0%{                 /* 0 */
        opacity: 0;
    }
    6,6%{               /* percent */
        opacity: 1;
    }
    26,6%{              /* percent * (1 + slideDuration) */
        opacity:1;
    }
    33,2%{              /* percent * (2 + slideDuration) */
        opacity:0;
    }
    100%{               /* 100 */
        opacity: 0;
    }
}

@keyframes xfade{
    0%{
        opacity: 0;
    }
    5%{
        opacity: 1;
    }
    25%{
        opacity:1;
    }
    30%{
        opacity:0;
    }
    100%{
        opacity: 0;
    }
}

body {
    background-color: none;
}