JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

    <header>
        <h1>CSS3 Image Slider</h1>
    </header>

    <section>
        <div id="image">
            <a href="#">
                <img id="image1" src="http://flickholdr.com/400/250/tree.jpg" />
            </a>
        </div>
        <div>
            <a href="#image1">
                <img id="image2" src="http://flickholdr.com/400/250/flower.jpg" />
            </a>
        </div>
    <section>

    <footer>
    </footer>

</div>

CSS

#container {
    width: 600px;
    margin: 20px auto;
    text-align: center;
}

#image {
    width: 400px;
    height: 250px;
    overflow: scroll;
    margin: 20px auto;
    position: relative;
}
#image img {
    -webkit-transform: translate(0, 250px);
    transition: all linear 500ms;
    -o-transition: all linear 500ms;
    -moz-transition: all linear 500ms;
    -webkit-transition: all linear 5000ms;
}

#image img:target {
    -webkit-transform: translate(0, 0);
}

#image2
{
    height: 40px;
    width: 400px;   
}