<div id="shadow">
</div>
<div id="slider">
<div id="allpic">
<img src="http://www.coolusbtoys.com/wp-content/Angry-Birds-space-Calendar-2013.jpg"/>
</div>
<div id="allpic">
<img src="http://i4.ytimg.com/sh/G2lfbxaIEy4/showposter.jpg?v=4fbb28d7"/>
</div>
<div id="allpic">
<img src="http://ec2.images-amazon.com/images/I/41hmD1hLmBL._SL500_AA300_.jpg"/>
</div>
<div id="allpic">
<img src="https://1.bp.blogspot.com/-55F_zXg6TKI/UKB6cCTZ1XI/AAAAAAAAB3c/um9nqYtzfY4/s1600/61bEcpAzU0L._SL500_AA300_.jpg"/>
</div>
<div id="allpic">
<img src="https://1.bp.blogspot.com/-55F_zXg6TKI/UKB6cCTZ1XI/AAAAAAAAB3c/um9nqYtzfY4/s1600/61bEcpAzU0L._SL500_AA300_.jpg"/>
</div>
</div><!-- slider end -->
body{
background:-webkit-radial-gradient(circle,#f6b5ff, #e081ef);
background:-moz-radial-gradient(circle,#f6b5ff, #e081ef);
background:-ms-radial-gradient(circle,#f6b5ff, #e081ef);
background:-o-radial-gradient(circle,#f6b5ff, #e081ef);
background:radial-gradient(circle,#f6b5ff, #e081ef);
}
#slider{
width:630px;
border:4px solid #fff;;
outline:1px solid #999;
height:313px;
margin:-315px auto;
background:-webkit-radial-gradient(#ffefce, #fcd78d);
background:-moz-radial-gradient(#ffefce, #fcd78d);
background:-ms-radial-gradient(#ffefce, #fcd78d);
background:-o-radial-gradient(#ffefce, #fcd78d);
background:radial-gradient(#ffefce, #fcd78d);
}
#allpic{
width:70px;
height:300px;
background:#ccc;
margin:5px 0 0 5px;
float:left;
transition:all .5s ease-out;
overflow:hidden;
border:2px solid #fff;;
outline:1px solid #999;
}
#allpic:hover {
width:300px;
}
#shadow{
width:600px;
height:30px;
margin:330px auto 0;
border-radius:50%;
box-shadow:0px 12px 10px 3px rgba(0,0,0, 0.5);
}
/*
Visit My Website to see creative designs
www.HUSAMUI.com
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.