<style type="text/css">
.gallery {margin:50px auto; position:relative; width:640px; height:55px; padding-top:360px;}
input.fly {position:absolute; left:-9999px;}
.gallery label {display:block; float:left; width:100px; height:55px; padding-left:8px;}
.gallery label img {cursor:pointer;
border-radius:5px;
}
.gallery label:first-child {padding:0;}
.gallery .large {position:absolute; top:0; left:0; z-index:10; 
border-radius:8px;
box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);
-webkit-transform-origin:left bottom;
-o-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform: translateX(-9999px) skewX(30deg); 
-o-transform: translateX(-9999px) skewX(30deg); 
transform: translateX(-9999px) skewX(30deg); 
}
#p1:checked ~ .gallery img.p1,
#p2:checked ~ .gallery img.p2,
#p3:checked ~ .gallery img.p3,
#p4:checked ~ .gallery img.p4,
#p5:checked ~ .gallery img.p5,
#p6:checked ~ .gallery img.p6
{
-webkit-animation:flyIn 1s ease-in-out 0.25s forwards;
-o-animation:flyIn 1s ease-in-out 0.25s forwards;
animation:flyIn 1s ease-in-out 0.25s forwards;
}
.gallery img.large {
-webkit-animation: flyOut 1s ease-in-out forwards;
-o-animation: flyOut 1s ease-in-out forwards;
animation: flyOut 1s ease-in-out forwards;
}
#p1:checked ~ .gallery label:nth-of-type(1) img,
#p2:checked ~ .gallery label:nth-of-type(2) img,
#p3:checked ~ .gallery label:nth-of-type(3) img,
#p4:checked ~ .gallery label:nth-of-type(4) img,
#p5:checked ~ .gallery label:nth-of-type(5) img,
#p6:checked ~ .gallery label:nth-of-type(6) img
{
margin-top:-2px;
box-shadow:0 5px 10px -5px rgba(0,0,0,0.6);
}
@-webkit-keyframes flyIn {
0% {-webkit-transform: translateX(-9999px) skewX(30deg); z-index:100;}
60% {-webkit-transform: translateX(-50px) skewX(-30deg);}
80% {-webkit-transform: translateX(0) skewX(15deg);}
100% {-webkit-transform: translateX(0) skewX(0deg);}
}
@-webkit-keyframes flyOut {
0% {-webkit-transform: translateX(0) skewX(0deg);}
20% {-webkit-transform: translateX(0) skewX(-15deg);}
40% {-webkit-transform: translateX(50px) skewX(30deg);}
100% {-webkit-transform: translateX(-9999px) skewX(-30deg);opacity:0;}
}
@-o-keyframes flyIn {
0% {-o-transform: translateX(-9999px) skewX(30deg); z-index:100;}
60% {-o-transform: translateX(-50px) skewX(-30deg);}
80% {-o-transform: translateX(0) skewX(15deg);}
100% {-o-transform: translateX(0) skewX(0deg);}
}
@-o-keyframes flyOut {
0% {-o-transform: translateX(0) skewX(0deg);}
20% {-o-transform: translateX(0) skewX(-15deg);}
40% {-o-transform: translateX(50px) skewX(30deg);}
100% {-o-transform: translateX(-9999px) skewX(-30deg);opacity:0;}
}
@keyframes flyIn {
0% {transform: translateX(-9999px) skewX(30deg); z-index:100;}
60% {transform: translateX(-50px) skewX(-30deg);}
80% {transform: translateX(0) skewX(15deg);}
100% {transform: translateX(0) skewX(0deg);}
}
@keyframes flyOut {
0% {transform: translateX(0) skewX(0deg);}
20% {transform: translateX(0) skewX(-15deg);}
40% {transform: translateX(50px) skewX(30deg);}
100% {transform: translateX(-9999px) skewX(-30deg);opacity:0;}
}
</style>
<!--[if lt IE 10]>
    <style type="text/css">
	   #p1:checked ~ .gallery img.p1,
	   #p2:checked ~ .gallery img.p2,
	   #p3:checked ~ .gallery img.p3,
	   #p4:checked ~ .gallery img.p4,
	   #p5:checked ~ .gallery img.p5,
	   #p6:checked ~ .gallery img.p6 {transform: translateX(0px) skewX(0deg); }
    </style>
<![endif]-->
<!--[if lt IE 9]>
    <style type="text/css">
	   .gallery .large {left:-9999px;}
	   .gallery {background:url(p1.jpg) no-repeat;}
	   .gallery label:hover {direction:ltr;}
	   .gallery label:hover + img {left:0;}
    </style>
<![endif]-->
<form action="">
    <input name="fly" id="p1" checked="checked" type="radio">
    <input name="fly" id="p2" type="radio">
    <input name="fly" id="p3" type="radio">
    <input name="fly" id="p4" type="radio">
    <input name="fly" id="p5" type="radio">
    <input name="fly" id="p6" type="radio">
    <div>
	   <label for="p1" tabindex="1"><img src="t1.jpg" alt=""></label>
<img src="p1.jpg" alt="">
	   <label for="p2" tabindex="1"><img src="t2.jpg" alt=""></label>
<img src="p2.jpg" alt="">
	   <label for="p3" tabindex="1"><img src="t3.jpg" alt=""></label>
<img src="p3.jpg" alt="">
	   <label for="p4" tabindex="1"><img src="t4.jpg" alt=""></label>
<img src="p4.jpg" alt="">
	   <label for="p5" tabindex="1"><img src="t5.jpg" alt=""></label>
<img src="p5.jpg" alt="">
	   <label for="p6" tabindex="1"><img src="t6.jpg" alt=""></label>
<img src="p6.jpg" alt="">
    </div>
</form>