JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<div id="imageGallery">
<div class="imageZoom">
<ul>
<li id="slide1"><a href="http://www.flickr.com/photos/4lkna/4079058662/" title="Aston Martin Vantage Roadster "><img alt="Aston Martin Vantage Roadster" src="http://www.kulando.de/templates/blog_1575/new_greenmarinee/images/CSS3-Transition-AstonMartin.jpg" /></a></li>
<li id="slide2"><a href="http://www.flickr.com/photos/22256255@N05/2145948767/" title="Bentley Contienental GTC"><img alt="Bentley Contienental GTC" src="http://www.kulando.de/templates/blog_1575/new_greenmarinee/images/CSS3-Transition-Bentley.jpg" /></a></li>
<li id="slide3"><a href="http://www.flickr.com/photos/jgray-constable/3728807864/" title="Chevrolete"><img alt="Chevrolete" src="http://www.kulando.de/templates/blog_1575/new_greenmarinee/images/CSS3-Transition-Chevy.jpg" /></a></li>
<li id="slide4"><a href="http://www.flickr.com/photos/8363028@N08/3507372382/" title="Dodge"><img alt="Dodge" src="http://www.kulando.de/templates/blog_1575/new_greenmarinee/images/CSS3-Transition-Dodge.jpg" /></a></li>
<li id="slide5"><a href="http://www.flickr.com/photos/chicanerii/4062533257/" title="Mercedes-Benz"><img alt="Mercedes-Benz" src="http://www.kulando.de/templates/blog_1575/new_greenmarinee/images/CSS3-Transition-MercedesBenz.jpg" /></a></li>
<li id="slide6"><a href="http://www.flickr.com/photos/shanafin/432512433/" title="Mercedes-Benz 220S"><img alt="Mercedes-Benz 220S" src="http://www.kulando.de/templates/blog_1575/new_greenmarinee/images/CSS3-Transition-MercedesBenz220S.jpg" /></a></li>
</ul>
</div>
<div class="imagePreview">
<ul>
<li><a href="#slide1"><img alt="img1" src="http://www.kulando.de/templates/blog_1575/new_greenmarinee/images/CSS3-Transition-AstonMartin-thumb.jpg" /></a></li>
<li><a href="#slide2"><img alt="img2" src="http://www.kulando.de/templates/blog_1575/new_greenmarinee/images/CSS3-Transition-Bentley-thumb.jpg" /></a></li>
<li><a href="#slide3"><img alt="img3"...

CSS

*, body {
	margin:0;
	padding:0;
}
#imageGallery {
	margin:25px;
	width:500px;
	border: 1px solid #f0f0f0;
}
.imageZoom ul {
   height:131px;
   padding:10px;
   margin:0;
   background: url(http://www.kulando.de/templates/blog_1575/new_greenmarinee/images/CSS3-Transition-ImageGallery-BG.jpg) 0 0 no-repeat;
}
.imageZoom ul li {
	list-style: none;
	margin:0;
	padding:0;
	float:left;
	width:0;
	height:131px;
}

.imageZoom ul li img {
	margin:0;
	width:0;
	height:0;
	border:0;
	overflow: hidden;
	-moz-transition: width 1s ease;
	-webkit-transition: width 1s ease;	
	-o-transition: width 1s ease;
	transition: width 1s ease;
}
.imageZoom ul li:target img {
	width:476px;
	height:131px;
	border:1px solid #f0f0f0;
}
.imagePreview {
	height:60px;
   margin:0;
   padding:0;
   background: #f0f0f0;
}
.imagePreview ul {
    margin:0;
    padding:0;
    list-style: none;
}
.imagePreview ul li{
	float: left;
	text-align: center;
   margin:13px 15px;
	padding:0;
   background: #f0f0f0;
}

.imagePreview ul li img {
   border: 1px solid #9f9f9f;
   padding:2px;
	margin:0;  
	background-color: #fff;
}
.imagePreview ul li a {
	outline: 0;
}
.imagePreview ul li a:hover img, 
.imagePreview ul li a:active img, 
.imagePreview ul li a:focus img {
   border-color:#fff;
}