/* the slide container with a fixed size */
.slideshow {
    width: 787px;
    height: 330px;
    position: relative;
    margin: auto;
    max-width: 100%;
    height: auto;
}

/* the images are positioned absolutely to stack. opacity transitions are animated. */
.slideshow img {
    display: block;
    position: absolute;
    transition: opacity 3s;
    opacity: 0;
    width: 100%;
    box-shadow: 5px 5px 20px #7cfc00; /*lawngreen*/
}

/* the first image is the current slide. it's faded in. */
.slideshow img:first-child {
    z-index: 2; /* frontmost */
    opacity: 1;
}

/* the last image is the previous slide. it's behind the current slide and it's faded over. */
.slideshow img:last-child {
    z-index: 1; /* behind current slide */
    opacity: 1;
}