Css галерия

• 
  
  
  Misty Landscape
  
  
  
• 
  
  
  Ladybirds
  
  
  
• 
  
  
  Dragonfly
  
  
  
• 
  
  
  Cricket
  
  
  
• 
  
  
  Green Lizard
  
  
  
• 
  
  
  Busking in Sydney
  
  
  
• 
  
  
  Singapore Mall
  
  
  
• 
  
  
  Kookaburra
  
  
  
• 
  
  
  Darling Harbour
  
  
  

Css opensource:
Css opensource:

body {
text-align: center;
}
.gallery {
padding:0;
margin:0;
list-style:none;
width:486px;
height:558px;
background:#f0f0e0;
position:relative;
margin:50px auto;
padding:20px;
border:1px solid #ddd;
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
*background:#f0f0e0 url(img/close.gif) no-repeat 493px 5px; /* for IE7 and lower */
}
* html .gallery {
width: 546px;
}

.gallery li {
float:left;
margin:15px;
width:132px;
height:156px;
}
.gallery img.close {
display:block;
position:absolute;
left:-9999px;
top:64px;
z-index:500;
opacity:0;
z-index:-1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
-webkit-transition-delay: 0.8s;
-moz-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
transition-delay: 0.8s;
}
.gallery li.close {
width:28px;
height:28px;
position:absolute;
left:493px;
top:5px;
//cursor:pointer; /* for IE7 and lower */
}
.gallery li a {
margin: 0;
float:left;
width:112px;
height:126px;
padding:9px 9px 19px 9px;
background:#fff;
border:1px solid #e0e0e0;
text-decoration:none;
color:#000;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.gallery li a.left {
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
transform: rotate(-12deg);
}
.gallery li a.right {
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
transform: rotate(12deg);
}
.gallery li a span {
display:block;
text-align:center;
text-decoration:none;
font: normal 10px/10px arial, sans-serif;
color:#fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/* this does nothing but gives a start position for the transitions
.gallery li a.p1 {
top:15px;
left:35px;
}
.gallery li a.p2 {
top:15px;
left:205px;
}
.gallery li a.p3 {
top:15px;
left:357px;
}
.gallery li a.p4 {
top:201px;
left:35px;
}
.gallery li a.p5 {
top:201px;
left:205px;
}
.gallery li a.p6 {
top:201px;
left:357px;
}
.gallery li a.p7 {
top:387px;
left:35px;
}
.gallery li a.p8 {
top:387px;
left:205px;
}

.gallery li a.p9 {
top:387px;
left:357px;
}
*/
.gallery li a img {
display:block;
width:100%;
height:100%;
}

.gallery li a:hover {
margin:-5px -4px;
width:120px;
height:135px;
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}

.gallery li a:active,
.gallery li a:focus {
margin:0;
position:absolute;
left:263px;
margin-left:-185px;
margin-top:-215px;
top:300px;

width:320px;
height:360px;
padding:25px 25px 50px 25px;
opacity:1;
z-index:100;
outline:0;
-webkit-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.7);
-o-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.7);
box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.7);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.gallery li a:active + img {
left:428px;
opacity:1;
z-index:500;
cursor:pointer;
}
.gallery li a:focus + img {
left:428px;
opacity:1;
z-index:500;
cursor:pointer;
}
.gallery li a:active span,
.gallery li a:focus span {
color:#000;
font-size:18px;
padding-top:10px;
}
-->