<style>
.slideOuter {width:747px; overflow:hidden; margin:0 auto; position:relative; z-index:500;}
.slideOuter .slide {padding:0; margin:0; list-style:none; width:1200px; overflow:hidden;}
.slideOuter .slide li {float:left; position:relative;}
.slideOuter .slide li {display:block; float:left; width:148px; border-right:1px solid #fff; background:#ddd; overflow:hidden;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.slideOuter .slide #p5 {width:360px;}
.slideOuter .slide li img {border:0; width:360px; height:125px; display:block; position: absolute; top:0; left:-106px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.slideOuter .slide:hover #p1,
.slideOuter .slide:hover #p2,
.slideOuter .slide:hover #p3,
.slideOuter .slide:hover #p4 {width:96px;}
.slideOuter .slide li:hover img {left:0;}
.slideOuter .slide #p1:hover,
.slideOuter .slide #p2:hover,
.slideOuter .slide #p3:hover,
.slideOuter .slide #p4:hover {width:360px;}
ul.slide dl {padding:0; margin:125px 0 0 0;}
ul.slide dt {padding:0 5px; margin:0; font:normal 13px/25px arial,sans-serif; color:#eee; background:#008; border-top:1px solid #fff;}
ul.slide dd {padding:0 5px; margin:0; font:normal 12px/18px arial,sans-serif; color:#eee; height:0; overflow:hidden;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
ul.slide dd a { color:#fff; text-decoration:underline;}
ul.slide dd a:hover { color:#fff; text-decoration:none;}
ul.slide dt:hover + dd {height:104px;}
ul.slide dd:hover {height:104px;}
ul.slide .m1 {background:#562;}
ul.slide .m2 {background:#366;}
ul.slide .m3 {background:#246;}
ul.slide .m4 {background:#741;}
ul.slide .m5 {background:#623;}
ul.slide li:hover dt {font-weight:bold; color:#fff;}
</style>
<br>
<div class ="slideOuter">
    <ul class ="slide">
	   <li id="p1">
		  <img src="pic2.jpg" alt="">
		  <dl>
			 <dt class ="m1">General</dt>
			 <dd class ="m1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel 
<a href="#url">libero ac elit cursus</a> rutrum eu ac urna. Phasellus ipsum orci, rutrum eu pulvinar non, posuere nec augue.</dd>
			 <dt class ="m2">Origin</dt>
			 <dd class ="m2">Duis velit leo, rutrum non bibendum non, feugiat et
ipsum. In hac habitasse platea dictumst. In risus libero, aliquam non
malesuada quis, varius id libero. Nunc sed metus ac quam laoreet
ultricies a sed urna. Mauris aliquet dapibus pharetra.</dd>
			 <dt class ="m3">Habitat</dt>
			 <dd class ="m3">Aliquam quis magna sit amet nisi blandit vestibulum. Sed et orci 
sed neque interdum elementum quis non tellus.</dd>
			 <dt class ="m4">Feeding</dt>
			 <dd class ="m4">Curabitur tempus velit turpis, sit amet pulvinar
justo. Proin eu dolor neque. Pellentesque facilisis erat sit amet lorem
blandit egestas.</dd>
			 <dt class ="m5">Caring</dt>
			 <dd class ="m5">Quisque eget dolor tellus. Praesent ullamcorper tristique mi eget volutpat. 
Nullam bibendum dolor id arcu condimentum vehicula.</dd>
		  </dl>
	   </li>
	   <li id="p2">
		  <img src="pic3.jpg" alt="">
		  <dl>
			 <dt class ="m1">General</dt>
			 <dd class ="m1">Phasellus tempor posuere rhoncus. Etiam eleifend nisi
 a nibh imperdiet lobortis venenatis lacus facilisis. Fusce venenatis 
diam sit amet elit viverra porta. Vivamus vitae tempus risus.</dd>
			 <dt class ="m2">Origin</dt>
			 <dd class ="m2">Nunc dui eros, sodales quis mollis a, sollicitudin eget quam. 
<a href="#url">Proin et lorem eu magna</a> elementum pulvinar quis a quam. Suspendisse a erat eu velit feugiat adipiscing.</dd>
			 <dt class ="m3">Habitat</dt>
			 <dd class ="m3">Vivamus urna enim, luctus et fringilla vel, aliquet 
ut ligula. Pellentesque tincidunt posuere lobortis. Integer sodales 
sollicitudin sem ac molestie. Sed pharetra, odio ut venenatis aliquam, 
orci mi dapibus mi, in tristique urna augue id nisi.</dd>
			 <dt class ="m4">Feeding</dt>
			 <dd class ="m4">Proin lacus lectus, fermentum vel dictum ac, iaculis 
sit amet metus. Morbi augue turpis, malesuada quis fringilla ornare, 
rutrum et nisl. Praesent ultricies, leo ac interdum rhoncus, sem est 
auctor eros, in lobortis diam dui non augue.</dd>
			 <dt class ="m5">Caring</dt>
			 <dd class ="m5">Pellentesque malesuada, justo ut auctor lobortis, 
urna dolor dignissim odio, malesuada blandit lorem mi id nunc. Donec 
tristique auctor sollicitudin.</dd>
		  </dl>
	   </li>
	   <li id="p3">
		  <img src="pic4.jpg" alt="">
		  <dl>
			 <dt class ="m1">General</dt>
			 <dd class ="m1">In et arcu eget risus sagittis tincidunt. Quisque 
nibh odio, lobortis at varius viverra, aliquam sed metus. Phasellus 
sagittis, dui sit amet pharetra iaculis, quam nulla sollicitudin sem, 
vel mattis turpis leo et metus.</dd>
			 <dt class ="m2">Origin</dt>
			 <dd class ="m2">Curabitur varius mauris vel dolor aliquet accumsan. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse 
diam lectus, luctus at vehicula sed, ultricies in orci.</dd>
			 <dt class ="m3">Habitat</dt>
			 <dd class ="m3">Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
per inceptos himenaeos. <a href="#url">Pellentesque bibendum</a>, lacus blandit mattis dignissim, justo diam lobortis felis, 
at convallis turpis velit vitae libero.</dd>
			 <dt class ="m4">Feeding</dt>
			 <dd class ="m4">Nunc velit arcu, laoreet sed tristique quis, 
malesuada ut erat. Pellentesque suscipit diam ut tortor faucibus id 
tincidunt felis gravida. Nulla porta lacinia pellentesque.</dd>
			 <dt class ="m5">Caring</dt>
			 <dd class ="m5">Aliquam aliquet blandit justo sed gravida. Curabitur 
tristique sollicitudin justo, nec vehicula dui porta nec. Sed eleifend 
lacinia mollis. Nunc purus ante, lacinia sed faucibus id, pellentesque 
eget lectus.</dd>
		  </dl>
	   </li>
	   <li id="p4">

		  <img src="pic5.jpg" alt="">
		  <dl>
			 <dt class ="m1">General</dt>
			 <dd class ="m1">In ac tellus ac sapien ultricies hendrerit. 
Suspendisse potenti. Praesent blandit, nisi nec aliquam sodales, erat 
diam tincidunt dui, eu euismod lectus sapien sit amet nisi. Quisque in 
tellus dolor.</dd>
			 <dt class ="m2">Origin</dt>
			 <dd class ="m2">Aenean sodales dui a sem egestas ornare. Cras sem 
dui, gravida sit amet ullamcorper non, placerat et sem. Pellentesque ac 
diam lacinia lacus commodo fermentum.</dd>
			 <dt class ="m3">Habitat</dt>
			 <dd class ="m3">Nullam a odio at nisi consequat posuere quis non 
eros. In rutrum viverra augue, ac facilisis libero ultricies nec. 
Aliquam cursus turpis nec lorem gravida in dignissim augue facilisis. 
Maecenas condimentum nisi sed metus luctus mattis.</dd>
			 <dt class ="m4">Feeding</dt>
			 <dd class ="m4">Mauris sagittis luctus nisi eget ultrices. Integer egestas tristique dapibus. 
Sed sodales bibendum molestie. <a href="#url">Mauris diam arcu</a>, vehicula et tempor in, consectetur nec dui. 
Nunc eu enim sed ligula aliquam gravida ac ac ipsum.</dd>
			 <dt class ="m5">Caring</dt>
			 <dd class ="m5">Praesent dictum tincidunt ipsum, id pellentesque mi 
semper et. Fusce mollis quam nec leo pharetra hendrerit. Nunc viverra, 
nisl ac dictum dictum, nibh libero fermentum metus, et ornare odio lacus
 id metus.</dd>
		  </dl>
	   </li>
	   <li id="p5">
		  <img src="pic1.jpg" alt="">
		  <dl>
			 <dt class ="m1">General</dt>
			 <dd class ="m1">Donec odio tortor, fermentum nec placerat eget, 
pretium accumsan purus. Nam sit amet dui vitae lectus malesuada 
porttitor sed et felis. Sed nec facilisis leo. Sed ac nibh sed turpis 
pretium vestibulum quis nec massa.</dd>
			 <dt class ="m2">Origin</dt>
			 <dd class ="m2">Duis adipiscing, lectus bibendum fermentum tempor, 
risus lectus ultricies leo, ut porta nisl velit in libero. Fusce luctus 
ultrices ligula ac tempus. Mauris urna nunc, sollicitudin in facilisis 
et, auctor sit amet nibh.</dd>
			 <dt class ="m3">Habitat</dt>
			 <dd class ="m3">Donec tristique posuere sapien nec sagittis. Proin 
vestibulum, purus quis pulvinar viverra, magna mi blandit arcu, at 
volutpat sapien tortor ut justo. Nulla sed mauris ac augue pharetra 
eleifend quis a est. Integer accumsan mauris sit amet turpis sodales 
tempus.</dd>
			 <dt class ="m4">Feeding</dt>
			 <dd class ="m4">Curabitur varius mauris vel dolor aliquet accumsan. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse 
diam lectus, luctus at vehicula sed, ultricies in orci. Class aptent 
taciti sociosqu ad litora torquent per conubia nostra, per inceptos 
himenaeos.</dd>
			 <dt class ="m5">Caring</dt>
			 <dd class ="m5">Pellentesque bibendum, <a href="#url">lacus blandit mattis dignissim</a>,
 justo diam lobortis felis, at convallis turpis velit vitae libero. Nunc
 velit arcu, laoreet sed tristique quis, malesuada ut erat.</dd>
		  </dl>
	   </li>
    </ul>
</div>
<br>