CSS3 Slider

FROM http://development.tobypitman.com/slideshow/index3.html

by B L Praveen

HTML

<h1>Pure CSS Sliding Image Gallery - No JS</h1>
<h3>View in Safari or Chrome</h3>
<p>Works well in Firefox and Opera too but no slidey slidey!</p>
<ul id="slider">
	<li id="1" >
		<img src="http://development.tobypitman.com/slideshow/images/grass-blades.jpg" alt="grass-blades" width="700" height="438" />
		<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></p>
	</li>
	<li id="2">
		<img src="http://development.tobypitman.com/slideshow/images/ladybug.jpg" alt="ladybug" width="700" height="438" />
		<p><span>Mind your step!</span></p>
	</li>
	<li id="3">
		<img src="http://development.tobypitman.com/slideshow/images/lotus.jpg" alt="lotus" width="700" height="438" />
		<p><span>This is an image of a big flower!</span></p>
	</li>
	<li id="4">
		<img src="http://development.tobypitman.com/slideshow/images/stones.jpg" alt="stones" width="700" height="438" />
		<p><span>Damn! Those are some nice looking stones!</span></p>
	</li>
</ul>

<ul id="thumb">
	<li><a href="#1"><img src="http://development.tobypitman.com/slideshow/images/grass-blades.jpg" alt="grass-blades" width="50" height="50" /></a></li>
	<li><a href="#2"><img src="http://development.tobypitman.com/slideshow/images/ladybug.jpg" alt="ladybug" width="50" height="50" /></a></li>
	<li><a href="#3"><img src="http://development.tobypitman.com/slideshow/images/lotus.jpg" alt="lotus" width="50" height="50" /></a></li>
	<li><a href="#4"><img src="http://development.tobypitman.com/slideshow/images/stones.jpg" alt="stones" width="50" height="50" /></a></li>
</ul>

CSS

body {
    background: url("http://development.tobypitman.com/slideshow/images/post-BG.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #FFFFFF;
    font-family: Helvetica,Verdana,Arial,sans-serif;
    text-align: center;
}
h1 {
    color: #030303;
    margin: 30px 0 0;
    text-shadow: 0 1px 2px #D6D6D6;
}
h3 {
    color: #030303;
    margin: 10px 0;
    text-shadow: 0 1px 2px #D6D6D6;
}
@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
		
	}
	
	50% { 
		opacity: 0;
	}
	
	100% { 
		opacity: 1;
	}
}

#box {
	text-align: left;
	width: 700px;
	margin: 30px auto 0 auto;
	background: #000;
	overflow: hidden;
	border: 10px solid #000;
	-webkit-box-shadow: #131313 0px 2px 10px;
	-moz-box-shadow: #131313 0px 3px 10px;
	box-shadow: #131313 0px 3px 10px;	
	-webkit-animation-name: fadeIn; 
  	-webkit-animation-duration: 3s; 
  	-webkit-animation-iteration-count: 1;
  	-webkit-animation-delay: 0s;
}

ul#slider{
	-webkit-border-radius: 10px;
	margin: 0px;
	padding: 0px;
	list-style: none;
	position: relative;
	width: 700px;
	height: 438px;
	overflow: hidden;	
}

ul#thumb {
	overflow: none;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	list-style: none;
	position: relative;
	background: #000;
	overflow: auto;
	width: 700px;
}

ul#thumb a {
	-webkit-transition: opacity .2s ease-in-out;
	border: 1px solid #979797;
	width: 35px;
	height: 35px;
	display: block;
	overflow: hidden;
	float: right;
	margin: 10px 0px 0px 10px;
	opacity: 0.75;
}

ul#thumb a:hover {
	opacity: 1;
} 

ul#slider li {	
	width: 700px;
	height: 438px;
	position: absolute;
	}
	
ul#slider li p {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: inherit;
	color: #fff;
	background: rgba(0, 0, 0, .5);
	width: 100%;
}

ul#slider li p span {
	line-height: 1.2em;
	padding: 10px;
	display: block;
}

/* Animation for the :target image. Slides the image in. */

@-webkit-keyframes moveTarget {
	0% {
		left:-700px;
		
	}
	
	100% { 
		left:0px;
	}
}


ul#slider li:target {
	-webkit-animation-name: moveTarget;...