<style>
.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(close.gif) no-repeat 493px 5px; /* for IE7 and lower */
}
.gallery li {float:left; margin:15px; width:132px; height:156px; display:inline;}
.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 {margin:0; width:28px; height:28px; position:absolute; left:493px; 
top:5px; *cursor:pointer; /* for IE7 and lower */}
.gallery li a {display:block; float:left; width:112px; height:126px; padding:9px 9px 19px 9px; margin:0; 
background:#fff; border:1px solid #e0e0e0; text-decoration:none; color:#000; position:absolute;
-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 5px/20px 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;
}
.gallery li a.p1 {top:25px; left:35px;}
.gallery li a.p2 {top:25px; left:205px;}
.gallery li a.p3 {top:25px; left:357px;}
.gallery li a.p4 {top:215px; left:35px;}
.gallery li a.p5 {top:215px; left:205px;}
.gallery li a.p6 {top:215px; left:357px;}
.gallery li a.p7 {top:405px; left:35px;}
.gallery li a.p8 {top:405px; left:205px;}
.gallery li a.p9 {top:405px; left:357px;}
.gallery li a img {display:block; width:100%; height:100%; border:0;}
.gallery li a:hover {margin:-5px -4px ; width:120px; height:135px; text-decoration:none;
-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; top:300px; 
margin-top:-215px; 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;}
</style>
<ul class ="gallery">
<li><a class ="p1 left" href="#url" tabindex="1"><img src="pic1.jpg" alt="">
<span>Misty Landscape</span></a><img class ="close" src="close.png" alt="" title="close this image"></li>
<li><a class ="p2 left" href="#url" tabindex="2"><img src="pic2.jpg" alt="">
<span>Ladybirds</span></a><img class ="close" src="close.png" alt="" title="close this image"></li>
<li><a class ="p3 left" href="#url" tabindex="3"><img src="pic3.jpg" alt="">
<span>Dragonfly</span></a><img class ="close" src="close.png" alt="" title="close this image"></li>
<li><a class ="p4 right" href="#url" tabindex="4"><img src="pic4.jpg" alt="">
<span>Cricket</span></a><img class ="close" src="close.png" alt="" title="close this image"></li>
<li><a class ="p5 right" href="#url" tabindex="5"><img src="pic5.jpg" alt="">
<span>Green Lizard</span></a><img class ="close" src="close.png" alt="" title="close this image"></li>
<li><a class ="p6 right" href="#url" tabindex="6"><img src="pic6.jpg" alt="">
<span>Busking in Sydney</span></a><img class ="close" src="close.png" alt="" title="close this image"></li>
<li><a class ="p7 left" href="#url" tabindex="7"><img src="pic7.jpg" alt="">
<span>Singapore Mall</span></a><img class ="close" src="close.png" alt="" title="close this image"></li>
<li><a class ="p8 left" href="#url" tabindex="8"><img src="pic8.jpg" alt="">
<span>Kookaburra</span></a><img class ="close" src="close.png" alt="" title="close this image"></li>
<li><a class ="p9 left" href="#url" tabindex="9"><img src="pic9.jpg" alt="">
<span>Darling Harbour</span></a><img class ="close" src="close.png" alt="" title="close this image"></li>
<li class ="close"></li>
</ul>