<style type="text/css">
/* this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome */
/* tabindex="1" in the link code to fix the 'focus persist' problem in safari and chrome */
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;} 
100% {zoom:1;}
}
body {padding:0; margin:0;}
#gallery {width: 610px; height:350px; border:1px solid #ddd; margin:50px auto 100px auto; position:relative;}
a.lightBox {display:block; float:left; outline:0; padding:5px; border:1px solid #ddd; margin:20px; cursor:pointer;}
a.lightBox img {float:left;}

a.lightBox ~.oneBox {display:table; position:absolute; top:-50px; left:-9999px; width:810px; height:810px; z-index:500;}
a.lightBox ~.oneBox .back {display:block; position:absolute; top:-50px; left:-9999px; width:810px; 
height:16px; background:#000; z-index:-1; opacity:0;
-o-border-radius: 8px;
-ms-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
a.lightBox ~.oneBox .holder {position:relative; z-index:100; text-align:center; display:table-cell; vertical-align:middle;}
.oneBox .frame {display:inline-block; margin:0 auto; position:relative; text-align:left; font-family:arial, 
sans-serif; padding:20px 20px 10px 20px; background:#fff;
-moz-transform: scale(0.05,0); -webkit-transform: scale(0.05,0);
-o-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
}
a.lightBox:focus ~ .oneBox {left:-100px;}
a.lightBox:focus ~ .oneBox .back {
-moz-animation: back 0.5s 0s 1 ease-in-out forwards;
-webkit-animation: back 0.5s 0s 1 ease-in-out forwards;
-o-animation: back 0.5s 0s 1 ease-in-out forwards;
animation: back 0.5s 0s 1 ease-in-out forwards;
}
a.lightBox:focus ~ .oneBox p {display:block; font:bold 12px/18px verdana, arial, sans-serif; color:#666; 
margin:0; height:70px; padding:10px 0 0 0; margin:-70px 0 0 0; position:relative; z-index:5; opacity:0;
-moz-animation: para 0.5s 2s 1 ease-in-out forwards;
-webkit-animation: para 0.5s 2s 1 ease-in-out forwards;
-o-animation: para 0.5s 2s 1 ease-in-out forwards;
animation: para 0.5s 2s 1 ease-in-out forwards;
}
a.lightBox:focus ~ .oneBox .frame {
-moz-animation: frame 1s 0.5s 1 ease-out forwards;
-webkit-animation: frame 1s 0.5s 1 ease-out forwards;
-o-animation: frame 1s 0.5s 1 ease-out forwards;
animation: frame 1s 0.5s 1 ease-out forwards;
}
a.lightBox ~ .oneBox .frame div {display:inline-block; position:relative; z-index:20; opacity:0;}
a.lightBox:focus ~ .oneBox .frame div {
-moz-animation: image 0.5s 1.5s 1 ease-out forwards;
-webkit-animation: image 0.5s 1.5s 1 ease-out forwards;
-o-animation: image 0.5s 1.5s 1 ease-out forwards;
animation: image 0.5s 1.5s 1 ease-out forwards;
 }
a.a1:focus ~ .oneBox .frame div:before {display:block; content:url("bw1.jpg");}
a.a2:focus ~ .oneBox .frame div:before {display:block; content:url("bw7.jpg");}
a.a3:focus ~ .oneBox .frame div:before {display:block; content:url("bw2.jpg");}
a.a4:focus ~ .oneBox .frame div:before {display:block; content:url("bw4.jpg");}
a.a5:focus ~ .oneBox .frame div:before {display:block; content:url("bw6.jpg");}
a.a6:focus ~ .oneBox .frame div:before {display:block; content:url("bw5.jpg");}
a.a7:focus ~ .oneBox .frame div:before {display:block; content:url("bw3.jpg");}
a.lightBox:focus ~ .oneBox .frame div:after {display:block; content:url("close2.png"); width:32px; 
height:32px; position:absolute; right:0px; top:0px; cursor:pointer;}
a.a1:focus ~ .oneBox .frame p:before {content:"image #1";}
a.a2:focus ~ .oneBox .frame p:before {content:"image #2";}
a.a3:focus ~ .oneBox .frame p:before {content:"image #3";}
a.a4:focus ~ .oneBox .frame p:before {content:"image #4";}
a.a5:focus ~ .oneBox .frame p:before {content:"image #5";}
a.a6:focus ~ .oneBox .frame p:before {content:"image #6";}
a.a7:focus ~ .oneBox .frame p:before {content:"image #7";}
a.a1:focus ~ .oneBox .frame p:after {display:block; font-weight:normal; white-space: pre; 
content:"A street entertainer\A This is a photograph I took during a recent visit to Bath where there are many street entertainers.";}
a.a2:focus ~ .oneBox .frame p:after {display:block; font-weight:normal; white-space: pre; 
content:"Cannon wheel\A Part of a cannon at Windsor Castle.";}
a.a3:focus ~ .oneBox .frame p:after {display:block; font-weight:normal; white-space: pre; 
content:"Another street entertainer\A Again taken during a visit to Bath.";}
a.a4:focus ~ .oneBox .frame p:after {display:block; font-weight:normal; white-space: pre; 
content:"Clovelly, North Devon\A A cobbled path down to the sea front at Clovelly.";}
a.a5:focus ~ .oneBox .frame p:after {display:block; font-weight:normal; white-space: pre; 
content:"Proud parents\A Swans with their cygnets on Stroud Park lake.";}
a.a6:focus ~ .oneBox .frame p:after {display:block; font-weight:normal; white-space: pre; 
content:"A seaside cottage\A One of the many beautiful cottages in Boscastle North Cornwall.";}
a.a7:focus ~ .oneBox .frame p:after {display:block; font-weight:normal; white-space: pre; 
content:"A street entertainer\A Yet another entertainer on the streets of Bath.";}
.clear {clear:both;}
@-moz-keyframes back {
0% {left:-100px;}
100% {left:-100px; height:810px; opacity:0.5;}
}
@-moz-keyframes para {
0% {margin-top:-70px; opacity:1;}
100% {margin-top:0; opacity:1;}
}
@-moz-keyframes frame {
0% {-moz-transform: scale(0.05,0);}
50% {-moz-transform: scale(0.05,1);}
100% {-moz-transform: scale(1,1);}
}
@-moz-keyframes image {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes back {
0% {left:0px; top:0;}
100% {left:0px; top:0; height:810px; opacity:0.5;}
}
@-webkit-keyframes para {
0% {margin-top:-70px; opacity:1;}
100% {margin-top:0; opacity:1;}
}
@-webkit-keyframes frame {
0% {-webkit-transform: scale(0.05,0);}
50% {-webkit-transform: scale(0.05,1);}
100% {-webkit-transform: scale(1,1);}
}
@-webkit-keyframes image {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes back {
0% {left:0px; top:0;}
100% {left:0px; top:0; height:810px; opacity:0.5;}
}
@-o-keyframes para {
0% {margin-top:-70px; opacity:1;}
100% {margin-top:0; opacity:1;}
}
@-o-keyframes frame {
0% {-o-transform: scale(0.05,0);}
50% {-o-transform: scale(0.05,1);}
100% {-o-transform: scale(1,1);}
}
@-o-keyframes image {
0% {opacity:0;}
100% {opacity:1;}
}
@keyframes back {
0% {left:0px; top:0;}
100% {left:0px; top:0; height:810px; opacity:0.5;}
}
@keyframes para {
0% {margin-top:-70px; opacity:1;}
100% {margin-top:0; opacity:1;}
}
@keyframes frame {
0% {transform: scale(0.05,0);}
50% {transform: scale(0.05,1);}
100% {transform: scale(1,1);}
}
@keyframes image {
0% {opacity:0;}
100% {opacity:1;}
}
</style>
<div id="gallery">
<a class ="lightBox a1" tabindex="1"><img src="bw1t.jpg"></a>
<a class ="lightBox a2" tabindex="1"><img src="bw7t.jpg"></a>
<a class ="lightBox a3" tabindex="1"><img src="bw2t.jpg"></a>
<br class ="clear">
<a class ="lightBox a4" tabindex="1"><img src="bw4t.jpg"></a>
<a class ="lightBox a5" tabindex="1"><img src="bw6t.jpg"></a>
<a class ="lightBox a6" tabindex="1"><img src="bw5t.jpg"></a>
<a class ="lightBox a7" tabindex="1"><img src="bw3t.jpg"></a>
<div class ="oneBox">
    <div class ="back"></div>
    <div class ="holder">
	   <div class ="frame">
		  <div></div>
		  <p></p>
	   </div>
    </div>
</div>
</div>