Membuat Lightbox Gallery Tidak Menggunakan jQuery

<style type="text/css">
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.starlightImages {padding-left:10px;}
.aBox img {border:0;}
.bBox {display:none;}

.starLight {display:table; position:fixed; top:0; left:-9999px; width:100%; height:100%; z-index:500; background:rgba(0,0,0,0.5);}
.starLight .holder {position:fixed; width:100%; height:100%; left:0; top:0; z-index:100; text-align:center; display:table-cell; opacity:0;
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}

.starLight .frame {display:inline-block; margin:50px auto; padding:15px; background:#fff; position:relative; text-align:left; font-family:arial, sans-serif;
border-radius:10px 10px 0 0;
}
.starLight .frame .clickLeft {position:absolute; left:15px; top:15px; right:50%; bottom:15px; background:url(trans.gif); z-index:110;}
.starLight .frame .clickLeft .previous {opacity:0; position:absolute; width:100px; text-align:center; height:40px; top:120px; left:0; background:rgba(64,64,64,0.6); font:bold 15px/40px arial, sans-serif; text-decoration:none; color:#fff; border-radius:0 10px 10px 0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.starLight .frame .clickLeft:hover .previous {opacity:1;}

.starLight .frame .clickRight {position:absolute; right:15px; top:15px; left:50%; bottom:15px; background:url(trans.gif); z-index:110;}
.starLight .frame .clickRight .next {opacity:0; position:absolute; width:100px; text-align:center; height:40px; top:120px; right:0; background:rgba(64,64,64,0.6); font:bold 15px/40px arial, sans-serif; text-decoration:none; color:#fff; border-radius:10px 0 0 10px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.starLight .frame .clickRight:hover .next {opacity:1;}

.starLight .frame .caption {position:absolute; margin-top:-150px; left:0; right:0; padding:5px 15px; background:#fff;
border-radius: 0 0 10px 10px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
transition-delay: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}
.starLight .frame .caption .shadow {left:15px; right:15px; height:60px; position:absolute; bottom:5px; background:#aaa; box-shadow:0 10px 20px rgba(0,0,0,0.5); z-index:-1; border-radius: 100px/50px; }
.starLight .frame .caption h4 {font-size:18px; margin:0; padding:3px 0; color:#333;}
.starLight .frame .caption p {font-size:12px; color:#444; margin:0; padding:3px 0;}
.starLight .frame .caption h4 span {float:right; font-size:9px;}
.starLight .large {display:inline-block; position:relative; z-index:100; border:1px solid #888;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.starLight .frame .close {display:block; width:48px; height:48px; position:absolute; top:-24px; right:-24px; z-index:200; opacity:0;
-webkit-transition: 1s 1s;
-moz-transition: 1s 1s;
-o-transition: 1s 1s;
transition: 1s 1s;
}
.starLight .frame .close img {border:0;}

#t1:target ~ .starLight,
#t2:target ~ .starLight,
#t3:target ~ .starLight,
#t4:target ~ .starLight,
#t5:target ~ .starLight,
#t6:target ~ .starLight {left:0;}

#t1:target ~ .starLight .h1,
#t2:target ~ .starLight .h2,
#t3:target ~ .starLight .h3,
#t4:target ~ .starLight .h4,
#t5:target ~ .starLight .h5,
#t6:target ~ .starLight .h6
{opacity:1;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}

#t1:target ~ .starLight .h1 .close,
#t2:target ~ .starLight .h2 .close,
#t3:target ~ .starLight .h3 .close,
#t4:target ~ .starLight .h4 .close,
#t5:target ~ .starLight .h5 .close,
#t6:target ~ .starLight .h6 .close
{opacity:1;}

#t1:target ~ .starLight .h1 .caption,
#t2:target ~ .starLight .h2 .caption,
#t3:target ~ .starLight .h3 .caption,
#t4:target ~ .starLight .h4 .caption,
#t5:target ~ .starLight .h5 .caption,
#t6:target ~ .starLight .h6 .caption
{margin-top:10px;}
</style>

<div id="info">
<div class="starlightImages">
<a href="#t1" class="aBox"><img src="html5/pic1t.jpg" alt="" /></a>
<a href="#t2" class="aBox"><img src="html5/pic2t.jpg" alt="" /></a>
<a href="#t3" class="aBox"><img src="html5/pic3t.jpg" alt="" /></a>
<a href="#t4" class="aBox"><img src="html5/pic4t.jpg" alt="" /></a>
<a href="#t5" class="aBox"><img src="html5/pic5t.jpg" alt="" /></a>
<a href="#t6" class="aBox"><img src="html5/pic6t.jpg" alt="" /></a>
</div>
<b id="t1" class="bBox"></b><b id="t2" class="bBox"></b><b id="t3" class="bBox"></b><b id="t4" class="bBox"></b><b id="t5" class="bBox"></b><b id="t6" class="bBox"></b>

<div class="starLight">
<div class="holder h1">
<div class="frame">
<div class="clickLeft"><a href="#t6" class="previous">PREVIOUS</a></div><div class="clickRight"><a href="#t2" class="next">NEXT</a></div>

<img class="large" src="html5/pic1.jpg" />
<div class="caption"><div class="shadow"></div>
</div>

<a class="close" href="#url"><img src="html5/close.png" alt="Close" /></a>
</div>
</div>
<div class="holder h2">
<div class="frame">
<div class="clickLeft"><a href="#t1" class="previous">PREVIOUS</a></div><div class="clickRight"><a href="#t3" class="next">NEXT</a></div>
<img class="large" src="html5/pic2.jpg" />
<div class="caption"><div class="shadow"></div>

<h4>Caption for Image #2 <span>Image 2/6</span></h4>
<p>Followed by lines of descriptive text that can contain <a href="index.html">links</a> if required.</p>
</div>
<a class="close" href="#url"><img src="html5/close.png" alt="Close" /></a>
</div>
</div>

<div class="holder h3">
<div class="frame">
<div class="clickLeft"><a href="#t2" class="previous">PREVIOUS</a></div><div class="clickRight"><a href="#t4" class="next">NEXT</a></div>
<img class="large" src="html5/pic3.jpg" />
<div class="caption"><div class="shadow"></div>
<h4>Caption for Image #3 <span>Image 3/6</span></h4>
<p>Followed by lines of descriptive text that can contain <a href="index.html">links</a> if required.</p>

</div>
<a class="close" href="#url"><img src="html5/close.png" alt="Close" /></a>
</div>
</div>
<div class="holder h4">
<div class="frame">
<div class="clickLeft"><a href="#t3" class="previous">PREVIOUS</a></div><div class="clickRight"><a href="#t5" class="next">NEXT</a></div>
<img class="large" src="html5/pic4.jpg" />

<div class="caption"><div class="shadow"></div>
<h4>Caption for Image #4 <span>Image 4/6</span></h4>
<p>Followed by lines of descriptive text that can contain <a href="index.html">links</a> if required.</p>
</div>
<a class="close" href="#url"><img src="html5/close.png" alt="Close" /></a>
</div>

</div>
<div class="holder h5">
<div class="frame">
<div class="clickLeft"><a href="#t4" class="previous">PREVIOUS</a></div><div class="clickRight"><a href="#t6" class="next">NEXT</a></div>
<img class="large" src="html5/pic5.jpg" />
<div class="caption"><div class="shadow"></div>
<h4>Caption for Image #5 <span>Image 5/6</span></h4>

<p>Followed by lines of descriptive text that can contain <a href="index.html">links</a> if required.</p>
</div>
<a class="close" href="#url"><img src="html5/close.png" alt="Close" /></a>
</div>
</div>
<div class="holder h6">
<div class="frame">

<div class="clickLeft"><a href="#t5" class="previous">PREVIOUS</a></div><div class="clickRight"><a href="#t1" class="next">NEXT</a></div>
<img class="large" src="html5/pic6.jpg" />
<div class="caption"><div class="shadow"></div>
<h4>Caption for Image #6 <span>Image 6/6</span></h4>
<p>Followed by lines of descriptive text that can contain <a href="index.html">links</a> if required.</p>

</div>
<a class="close" href="#url"><img src="html5/close.png" alt="Close" /></a>
</div>
</div>
</div>

<p class="info">Copyright &copy;2012 Buku Catatan si Ugi</p>
<br />
</div> <!-- end of info -->