<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 label:hover {direction:ltr;}
.gallery label:hover + img {left:0;}
</style>
<![endif]-->
<form action="">  
<input type="radio" name="fly" id="p1" class="fly" checked="checked" />
<input type="radio" name="fly" id="p2" class="fly" />
<input type="radio" name="fly" id="p3" class="fly" />
<input type="radio" name="fly" id="p4" class="fly" />
<input type="radio" name="fly" id="p5" class="fly" />
<input type="radio" name="fly" id="p6" class="fly" />
<div class="gallery">
<label for="p1" tabindex="1">
<img class="thumb" src="http://delaisait.ucoz.ru/script/galereya/img/5/t1.jpg" alt="Стрекоза 1" />
</label>
<img class="large p1" src="http://delaisait.ucoz.ru/script/galereya/img/5/p1.jpg" alt="Стрекоза 1" />
<label for="p2" tabindex="1">
<img class="thumb" src="http://delaisait.ucoz.ru/script/galereya/img/5/t2.jpg" alt="Стрекоза 2" />
</label>
<img class="large p2" src="http://delaisait.ucoz.ru/script/galereya/img/5/p2.jpg" alt="Стрекоза 2" />
<label for="p3" tabindex="1"><img class="thumb" src="http://delaisait.ucoz.ru/script/galereya/img/5/t3.jpg" alt="Стрекоза 3" />
</label>
<img class="large p3" src="http://delaisait.ucoz.ru/script/galereya/img/5/p3.jpg" alt="Стрекоза 3" />
<label for="p4" tabindex="1"><img class="thumb" src="http://delaisait.ucoz.ru/script/galereya/img/5/t4.jpg" alt="Стрекоза 4" />
</label>
<img class="large p4" src="http://delaisait.ucoz.ru/script/galereya/img/5/p4.jpg" alt="Стрекоза 4" />
<label for="p5" tabindex="1"><img class="thumb" src="http://delaisait.ucoz.ru/script/galereya/img/5/t5.jpg" alt="Стрекоза 5" />
</label>
<img class="large p5" src="http://delaisait.ucoz.ru/script/galereya/img/5/p5.jpg" alt="Стрекоза 5" />
<label for="p6" tabindex="1"><img class="thumb" src="http://delaisait.ucoz.ru/script/galereya/img/5/t6.jpg" alt="Стрекоза 6" />
</label>
<img class="large p6" src="http://delaisait.ucoz.ru/script/galereya/img/5/p6.jpg" alt="Стрекоза 6" />
</div>
</form>