Basic Slider

Hover to reveal the next slide.

by William Newton

HTML

<div class="screen">
    <div class="slider">
        <img src="http://i.imgur.com/6VQhscE.png">
        <img src="http://i.imgur.com/og7oQYO.png">
    </div>
</div>

CSS

.screen {
	overflow:hidden;
	width:320px;
height:568px;
}
.slider {
	position:relative;
	float:left;
	height:568px;
    width:700px;
	left:0;
	-webkit-transition:all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.slider img {
	position:relative;
	float:left;
	height:568px;
	width:320px;
}

.screen:hover .slider {
    left:-320px;
}