<style>
.gallery {padding:0; margin:0; list-style:none; width:486px; height:570px; background:#fff; 
position:relative; margin:50px auto; padding:20px;
*background:#fff url(close.gif) no-repeat 493px 5px; /* for IE7 and lower */
}
.gallery li {float:left; margin:15px; width:132px;}
.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 a {position:absolute;}
.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; padding:9px; margin:0; background:#fff; 
border:1px solid #d0d0d0; 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.wide {width:160px;}
.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:15px; left:35px;}
.gallery li a.p2 {top:15px; left:195px;}
.gallery li a.p3 {top:15px; left:357px;}
.gallery li a.p4 {top:201px; left:35px;}
.gallery li a.p5 {top:201px; left:173px;}
.gallery li a.p6 {top:201px; left:357px;}
.gallery li a.p7 {top:387px; left:12px;}
.gallery li a.p8 {top:387px; left:195px;}
.gallery li a.p9 {top:387px; left:357px;}
.gallery li a img {display:block; width:100%; height:auto; border:0;}
.gallery li a:hover {margin:-5px -4px; width:120px; z-index:50; padding:11px; 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.wide:hover {width:170px;}
.gallery li a:active,
.gallery li a:focus {margin:0; position:absolute; left:263px; margin-left:-185px; top:250px; 
margin-top:-215px; width:320px; padding: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.wide:active,
.gallery li a.wide:focus {left:263px; margin-left:-285px; top:250px; margin-top:-215px; width:520px;}
.gallery li a:active + img {left:428px; top:20px; opacity:1; z-index:500; cursor:pointer;}
.gallery li a:focus + img {left:428px; top:20px; opacity:1; z-index:500; cursor:pointer;}
.gallery li a.wide:active + img {left:528px; top:20px; opacity:1; z-index:500; cursor:pointer;}
.gallery li a.wide:focus + img {left:528px; top:20px; 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="mary-and-elizabeth.jpg" alt="">
<span>Mary and Elizabeth</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="margaret-burr.jpg" alt="">
<span>Margaret Burr</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="mrs-grace-dalrymple.jpg" alt="">
<span>Mrs Grace Dalrymple</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="mrs-thomas-graham.jpg" alt="">
<span>Mrs Thomas Graham</span></a><img class ="close" src="close.png" alt="" title="close this image"></li>
<li><a class ="p5 right wide" href="#url" tabindex="5"><img src="wooded-landscape.jpg" alt="">
<span>A Wooded Landscape</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="sarah-siddons.jpg" alt="">
<span>Sarah Siddons</span></a><img class ="close" src="close.png" alt="" title="close this image"></li>
<li><a class ="p7 left wide" href="#url" tabindex="7"><img src="mr-and-mrs-andrews.jpg" alt="">
<span>Mr and Mrs Andrews</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="mp-for-norwich.jpg" alt="">
<span>MP for Norwich</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="blue-boy.jpg" alt="">
<span>The Blue Boy</span></a><img class ="close" src="close.png" alt="" title="close this image"></li>
<li class ="close"></li>
</ul>