<style type="text/css">
.container {width:750px; height:400px; position:relative; overflow:hidden; margin:20px auto;}
.container .back {display:block; width:200px; height:400px; background:#069; position:absolute; left:0; top:0; z-index:5; 
border-radius:0 20px 20px 0; box-shadow:0 0 10px rgba(0,0,0,0.4);}
.container input {position:absolute; left:-9999px;}
.container label {display:block; padding:0; margin:0; border:0; width:200px; height:80px; position:relative; z-index:50; color:#eee; 
font: normal 16px/80px georgia, serif; text-decoration:none; text-indent:20px; cursor:pointer;}
.container label img {position:absolute; left:0; top:0; width:200px; height:80px; z-index:100;}
.container .pointer {display:block; width:221px; height:80px; background:#69c; position:absolute; left:-1px; top:0; z-index:10; 
border-radius:0 20px 20px 0; box-shadow:0 0 10px rgba(0,0,0,0.4); border-right:1px solid transparent;
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
-webkit-transition:0s 3600s;
-moz-transition:0s 3600s;
-ms-transition:0s 3600s;
-o-transition:0s 3600s;
transition:0s 3600s;
}
.container .pointer .point {display:block; width:0; height:0;border-top:20px solid transparent; border-bottom:20px solid transparent; 
border-left:10px solid #fff; position:absolute; right:10px; top:20px;}
.container .slide {width:5000px; height:400px; position:absolute; right:-2220px; top:0; text-align:right;}
.container .slide div {width:475px; height:350px; padding:25px 25px 25px 50px; display:inline-block; vertical-align:top; text-align:left;}
.container .slide div {*display:inline;} /* for IE7 to display the first menu item */
.container .slide div:nth-of-type(6) {width:0; background:red; padding:0;
-webkit-transition:0s 3600s;
-moz-transition:0s 3600s;
-ms-transition:0s 3600s;
-o-transition:0s 3600s;
transition:0s 3600s;
}
.container input:checked ~ .pointer {
-webkit-transition:0.75s 0s;
-moz-transition:0.75s 0s;
-ms-transition:0.75s 0s;
-o-transition:0.75s 0s;
transition:0.75s 0s;
}
.container input:checked ~ .slide div:nth-of-type(6) {
-webkit-transition:0.75s 0s;
-moz-transition:0.75s 0s;
-ms-transition:0.75s 0s;
-o-transition:0.75s 0s;
transition:0.75s 0s;
}
.container #sub1:checked ~ .pointer {top:0;}
.container #sub2:checked ~ .pointer {top:80px;}
.container #sub3:checked ~ .pointer {top:160px;}
.container #sub4:checked ~ .pointer {top:240px;}
.container #sub5:checked ~ .pointer {top:320px;}
.container #sub1:checked ~ .slide div:nth-of-type(6) {width:0;}
.container #sub2:checked ~ .slide div:nth-of-type(6) {width:554px;}
.container #sub3:checked ~ .slide div:nth-of-type(6) {width:1108px;}
.container #sub4:checked ~ .slide div:nth-of-type(6) {width:1662px;}
.container #sub5:checked ~ .slide div:nth-of-type(6) {width:2216px;}
.slide div h4 {font: bold 18px/24px georgia, serif;}
.slide div ul {color:#069; font-size:14px;}
.slide div ul li a {color:#000; font: normal 14px/20px georgia, serif;}
.slide div ul li a:hover {text-decoration:none;}
#info .slide div p {font: normal 14px/20px georgia, serif;}
</style>
<div class ="container">
    <input name="sub" id="sub1" type="radio">
    <input name="sub" id="sub2" type="radio">
    <input name="sub" id="sub3" type="radio">
    <input checked="checked" name="sub" id="sub4" type="radio">
    <input name="sub" id="sub5" type="radio">
    <span class ="back"></span>
    <label for="sub1">Floral Print<img src="transparent.gif" alt=""></label>
    <label for="sub2">Sleeveless<img src="transparent.gif" alt=""></label>
    <label for="sub3">Pure Cotton<img src="transparent.gif" alt=""></label>
    <label for="sub4">Linen Blend<img src="transparent.gif" alt=""></label>
    <label for="sub5">Buttoned<img src="transparent.gif" alt=""></label>
    <span class ="pointer"><span class ="point"></span></span>
    <div class ="slide">
	   <div>
		  <img src="pic2.jpg" alt="">
		  <h4>Floral Print Dresses</h4>
		  <p>These dresses can be worn for both smart, day wear, and evening wear.<br>
These lines can describe the product and also contain links to other pages.</p>
		  <ul>
			 <li><a href="#">Floral Print One</a></li>
			 <li><a href="#">Floral Print Two</a></li>
			 <li><a href="#">Floral Print Three</a></li>
		  </ul>
	   </div>
	   <div>
		  <img src="pic1.jpg" alt="">
		  <h4>Sleeveless Dresses</h4>
		  <p>Feel your best with our fabulous range of sleeveless dresses.<br>
These lines can describe the product and also contain links to other pages.</p>
		  <ul>
			 <li><a href="#">Sleeveless One</a></li>
			 <li><a href="#">Sleeveless Two</a></li>
			 <li><a href="#">Sleeveless Three</a></li>
		  </ul>
	   </div>
	   <div>
		  <img src="pic3.jpg" alt="">
		  <h4>Pure Cotton Dresses</h4>
		  <p>These dresses are perfect for your holidays and have exclusive designs.<br>
These lines can describe the product and also contain links to other pages.</p>
		  <ul>
			 <li><a href="#">Pure Cotton One</a></li>
			 <li><a href="#">Pure Cotton Two</a></li>
		  </ul>
	   </div>
	   <div>
		  <img src="pic4.jpg" alt="">
		  <h4>Linen Blend Dresses</h4>
		  <p>Get the perfect look at affordable prices in our range of linen blend dresses.<br>
These lines can describe the product and also contain links to other pages.</p>
		  <ul>
			 <li><a href="#">Linen Blends One</a></li>
			 <li><a href="#">Linen Blend Two</a></li>
			 <li><a href="#">Linen Blend Three</a></li>
		  </ul>
	   </div>
	   <div>
		  <img src="pic5.jpg" alt="">
		  <h4>Buttoned Dresses</h4>
		  <p>Our girls buttoned dresses are chic and original.<br>
These lines can describe the product and also contain links to other pages.</p>
		  <ul>
			 <li><a href="#">Buttoned One</a></li>
			 <li><a href="#">Buttoned Two</a></li>
			 <li><a href="#">Buttoned Three</a></li>
		  </ul>
	   </div>
	   <div></div>
    </div>
</div>