<style type="text/css">
.wrap1 {width:320px; height:213px; position:relative; overflow:hidden; font-family:arial, sans-serif; border:0; margin:0 10px 0 50px; float:left;}
.wrap1 a {display:block; width:320px; height:213px; text-decoration:none; color:#000;}
.wrap1 img {border:0;}
.wrap1 i {display:block; width:320px; height:110px; position:absolute; left:0; top:213px; z-index:1; background:#000; filter: alpha(opacity=40);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.40;
 -webkit-transition: all 0.6s ease-in-out; 
 -moz-transition: all 0.6s ease-in-out; 
 -o-transition: all 0.6s ease-in-out; 
transition: all 0.6s ease-in-out; 
 }
.wrap1 p {display:block; width:320px; height:110px; position:absolute; left:0; top:213px; z-index:1; background:transparent; font-size:12px; 
color:#fff; padding:0; margin:0; line-height:16px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.wrap1 p b {display:block; font-size:22px; color:#fc0; text-align:left; margin:0; padding:0 10px; line-height:30px;}
.wrap1 p span {display:block; padding:10px; line-height:20px;}
.wrap1 a:hover {direction:ltr;}
.wrap1 a:hover i {top:103px;}
.wrap1 a:hover p {top:103px;}
.wrap2 {width:320px; height:213px; position:relative; overflow:hidden; font-family:arial, sans-serif; border:0; margin:0 10px; float:left;}
.wrap2 a {display:block; width:320px; height:213px; text-decoration:none; color:#000;}
.wrap2 img {border:0;
 -webkit-transition: all 0.6s ease-in-out; 
 -moz-transition: all 0.6s ease-in-out; 
 -o-transition: all 0.6s ease-in-out; 
transition: all 0.6s ease-in-out; 
}
.wrap2 i {display:block; width:320px; height:110px; position:absolute; left:0; top:-110px; z-index:1; background:#000;
 -webkit-transition: all 0.6s ease-in-out; 
 -moz-transition: all 0.6s ease-in-out; 
 -o-transition: all 0.6s ease-in-out; 
transition: all 0.6s ease-in-out; 
 }
.wrap2 p {display:block; width:320px; height:110px; position:absolute; left:0; top:-110px; z-index:1; background:transparent; font-size:12px; 
color:#fff; padding:0; margin:0; line-height:16px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.wrap2 p b {display:block; font-size:22px; color:#fc0; text-align:left; margin:0; padding:0 10px; line-height:30px;}
.wrap2 p span {display:block; padding:10px; line-height:20px;}
.wrap2 a:hover {direction:ltr;}
.wrap2 a:hover img {margin-top:110px;}
.wrap2 a:hover i {top:0;}
.wrap2 a:hover p {top:0;}
.wrap3 {clear:left; width:320px; height:213px; position:relative; overflow:hidden; font-family:arial, sans-serif; border:0; margin:20px 215px; 
float:left; background:#000;}
.wrap3 a {display:block; width:320px; height:213px; text-decoration:none; color:#000;}
.wrap3 img {border:0;
 -webkit-transition: all 0.6s ease-in-out; 
 -moz-transition: all 0.6s ease-in-out; 
 -o-transition: all 0.6s ease-in-out; 
transition: all 0.6s ease-in-out; 
}
.wrap3 i {display:block; width:320px; height:213px; position:absolute; left:-320px; top:-213px; z-index:1; background:#000;
 -webkit-transition: all 0.6s ease-in-out; 
 -moz-transition: all 0.6s ease-in-out; 
 -o-transition: all 0.6s ease-in-out; 
transition: all 0.6s ease-in-out; 
 }
.wrap3 p {display:block; width:320px; height:213px; position:absolute; left:-320px; top:-213px; z-index:1; background:transparent; 
font-size:12px; color:#fff; padding:0; margin:0; line-height:16px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.wrap3 p b {display:block; font-size:22px; color:#fc0; text-align:left; margin:0; padding:0 10px; line-height:30px;}
.wrap3 p span {display:block; padding:10px; line-height:20px;}
.wrap3 a:hover {direction:ltr;}
.wrap3 a:hover img {margin-top:213px; margin-left:320px;}
.wrap3 a:hover i {top:0; left:0;}
.wrap3 a:hover p {top:0; left:0}
.wrap4 {clear:left; width:320px; height:213px; position:relative; overflow:hidden; font-family:arial, sans-serif; border:0; margin:0 10px 0 50px; 
float:left;}
.wrap4 a {display:block; width:320px; height:213px; text-decoration:none; color:#000;}
.wrap4 img {border:0;}
.wrap4 i {display:block; width:160px; height:213px; position:absolute; left:320px; top:0; z-index:1; background:#000; filter: alpha(opacity=40);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.40;
 -webkit-transition: all 0.6s ease-in-out; 
 -moz-transition: all 0.6s ease-in-out; 
 -o-transition: all 0.6s ease-in-out; 
transition: all 0.6s ease-in-out; 
 }
.wrap4 p {display:block; width:213px; height:213px; position:absolute; left:320px; top:0; z-index:1; background:transparent; font-size:12px; 
color:#fff; padding:0; margin:0; line-height:16px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.wrap4 p b {display:block; font-size:22px; color:#fc0; text-align:left; margin:0; padding:0 10px; line-height:30px;}
.wrap4 p span {display:block; padding:10px; line-height:20px;}
.wrap4 a:hover {direction:ltr;}
.wrap4 a:hover i {left:160px;}
.wrap4 a:hover p {left:170px;}
.wrap5 {width:320px; height:213px; position:relative; overflow:hidden; font-family:arial, sans-serif; border:0; margin:0 10px; float:left;}
.wrap5 a {display:block; width:320px; height:213px; text-decoration:none; color:#000;}
.wrap5 img {border:0;
 -webkit-transition: all 0.6s ease-in-out; 
 -moz-transition: all 0.6s ease-in-out; 
 -o-transition: all 0.6s ease-in-out; 
transition: all 0.6s ease-in-out; 
}
.wrap5 i {display:block; width:160px; height:213px; position:absolute; left:-160px; top:0; z-index:1; background:#000;
 -webkit-transition: all 0.6s ease-in-out; 
 -moz-transition: all 0.6s ease-in-out; 
 -o-transition: all 0.6s ease-in-out; 
transition: all 0.6s ease-in-out; 
 }
.wrap5 p {display:block; width:160px; height:213px; position:absolute; left:-160px; top:0; z-index:1; background:transparent; font-size:12px; 
color:#fff; padding:0; margin:0; line-height:16px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.wrap5 p b {display:block; font-size:22px; color:#fc0; text-align:left; margin:0; padding:0 10px; line-height:30px;}
.wrap5 p span {display:block; padding:10px; line-height:20px;}
.wrap5 a:hover {direction:ltr;}
.wrap5 a:hover img {margin-left:160px;}
.wrap5 a:hover i {left:0;}
.wrap5 a:hover p {left:0;}
</style>
<br><br><br>
<div class ="wrap1">
<a href="#x">
    <img src="pic1.jpg" alt="">
    <i></i>
    <p>
	   <b>The Mini</b>
	   <span>The Mini is a small car that was made by the British Motor Corporation (BMC) and its successors from 1959 until 2000.
</span> 
    </p>
</a>
</div>
<div class ="wrap2">
<a href="#x">
    <img src="pic1.jpg" alt="">
    <i></i>
    <p>
	   <b>The Mini</b>
	   <span>The Mini is a small car that was made by the British Motor Corporation (BMC) and its successors from 1959 until 2000.
</span> 
    </p>
</a>
</div>
<div class ="wrap3">
<a href="#x">
    <img src="pic1.jpg" alt="">
    <i></i>
    <p>
	   <b>The Mini</b>
	   <span>The Mini is a small car that was made by the British Motor Corporation (BMC) and its successors from 1959 until 2000.
</span> 
    </p>
</a>
</div>
<div class ="wrap4">
<a href="#x">
    <img src="pic1.jpg" alt="">
    <i></i>
    <p>
	   <b>The Mini</b>
	   <span>The Mini is a small car that was made by the British Motor Corporation (BMC) and its successors from 1959 until 2000.
</span> 
    </p>
</a>
</div>
<div class ="wrap5">
<a href="#x">
    <img src="pic1.jpg" alt="">
    <i></i>
    <p>
	   <b>The Mini</b>
	   <span>The Mini is a small car that was made by the British Motor Corporation (BMC) and its successors from 1959 until 2000.
</span> 
    </p>
</a>
</div>
<br class ="clear"><br><br><br><br><br>