<style type="text/css">
.slideOuter {width:498px; height:200px; overflow:hidden; margin:0 auto;}
.slideOuter .slide {padding:0; margin:0; list-style:none; width:800px; height:200px; overflow:hidden;}
.slideOuter .slide li {float:left;}
.slideOuter .slide li a {display:block; float:left; width:98px; border-right:2px solid #fff; height:200px; overflow:hidden;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.slideOuter .slide a#p5 {width:318px;}
.slideOuter .slide.current a {width:43px;}
.slideOuter .slide.current li a.current {width:318px;}
.slideOuter .slide li a img {border:0;}
.slideOuter .slide:hover a#p1,
.slideOuter .slide:hover a#p2,
.slideOuter .slide:hover a#p3,
.slideOuter .slide:hover a#p4 {width:43px;}
.slideOuter .slide a#p1:hover,
.slideOuter .slide a#p2:hover,
.slideOuter .slide a#p3:hover,
.slideOuter .slide a#p4:hover {width:318px;}
</style>
<h2>With no 'current' tab set</h2>
<div class ="slideOuter">
<ul class ="slide">
<li><a id="p1" href="#url1"><img src="landscape.jpg" alt=""></a></li>
<li><a id="p2" href="#url2"><img src="portrait.jpg" alt=""></a></li>
<li><a id="p3" href="#url3"><img src="flower.jpg" alt=""></a></li>
<li><a id="p4" href="#url4"><img src="abstract.jpg" alt=""></a></li>
<li><a id="p5" href="#url5"><img src="seascape.jpg" alt=""></a></li>
</ul>
</div>
<br><br>
<h2>With a 'current' tab set</h2>
<div class ="slideOuter">
<ul class ="slide current">
<li><a id="p1" href="#url1"><img src="landscape.jpg" alt=""></a></li>
<li><a id="p2" class ="current" href="#url2"><img src="portrait.jpg" alt=""></a></li>
<li><a id="p3" href="#url3"><img src="flower.jpg" alt=""></a></li>
<li><a id="p4" href="#url4"><img src="abstract.jpg" alt=""></a></li>
<li><a id="p5" href="#url5"><img src="seascape.jpg" alt=""></a></li>
</ul>
</div>
<br>