New Page

CSS Light Box

Just hover over any of the thumbnail images below to open a larger image which will be centered horizontally on the screen.
To exit from the large image move the "mouse" upwards
<!-- You must build this code into - head -->
Step 1.
<style type="text/css">

body {height:100%; padding:0; margin:0; overflow:auto; background:#C8C8C8;}

#container {height:100%; width:100%; font-family:verdana, sans-serif; font-size:11px; line-height:18px;}
a, a:visited, a:hover {color:#444; text-decoration:none;}
a img {display:block; border:0;}

.thumbholder {width:760px; margin:0 auto 0 auto; padding:10px 0 10px 10px; border:1px solid #555; background:#E1E1E1;}
.thumbholder h2.title {font-size:25px; color:#444; font-weight:normal; font-family:"times new roman", serif;}
.thumbholder h2.title b {font-weight:bold; color:#000; font-size:30px;}
.thumbholder h2.title span {font-weight:bold; font-style:italic;}
.thumbholder p {padding:0 10px 0 0; margin:10px 0;}

a {display:block; float:left; margin:5px 10px 5px 0; display:inline; border:1px solid #000;}

.lightbox {position:absolute; left:-9999px; top:0; cursor:default; z-index:100;}
.light {position:absolute; left:0; top:0;}
.box {position:absolute; left:0; top:0;}

/* trigger for IE6 */
a:hover {background:#ddd;}


a:hover .lightbox {left:0; width:100%; height:100%;}

a:hover .lightbox .light {background:#000; width:100%; height:100%; filter: alpha(opacity=90);
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); opacity:0.9;
}



a:hover .lightbox .box {width:100%; text-align:center; margin-top:150px;}


a:hover .lightbox .box img {border:1px solid #aaa; margin:0 auto;}

a:hover .lightbox .box h2 {font-size:16px; font-weight:normal; width:400px; padding:0; margin:10px auto; text-align:center; text-decoration:none; color:#999;}
a:hover .lightbox .box h2 b {font-weight:bold; font-family:"times new roman", serif; color:#000;}

#close {width:16px; height:16px; position:relative; z-index:500; float:right; display:inline; margin-right:10px;}
.clear {clear:left;}
#ad {clear:left; width:468px; margin:10px auto; padding:10px 51px; background:#222;}
a.comments {float:none; margin:0; border:0; color:#c00; font-weight:bold;}
a:hover.comments {color:#c00; text-decoration:underline; background:#fff;}
</style>
<!-- You must build this code into - body -->
<div class="thumbholder">

<a href="#url"><img src="tn_Black-Sea-Waves.jpg" alt="Black Sea Waves"><div class="lightbox"><div class="light"></div><div class="box"><img src="Black-Sea-Waves.jpg" alt="Black Sea Waves"><h2>Black Sea Waves</h2></div></div></a>
<a href="#url"><img src="tn_frog1.jpg" alt="frog"><div class="lightbox"><div class="light"></div><div class="box"><img src="frog1.jpg" alt="frog"><h2>Frog</h2></div></div></a>
<a href="#url"><img src="tn_frog.jpg" alt="frog"><div class="lightbox"><div class="light"></div><div class="box"><img src="frog.jpg" alt="frog"><h2>Frog</h2></div></div></a>
<a href="#url"><img src="tn_bratz-dolls.jpg" alt="bratz dolls"><div class="lightbox"><div class="light"></div><div class="box"><img src="bratz-dolls.jpg" alt="bratz dolls"><h2>Bratz dolls</h2></div></div></a>
<a href="#url"><img src="tn_rilled-sheep-and-chicken.jpg" alt="Rilled sheep and chicken"><div class="lightbox"><div class="light"></div><div class="box"><img src="rilled-sheep-and-chicken.jpg" alt="Rilled sheep and chicken"><h2>Rilled sheep and chicken</h2></div></div></a>
<a href="#url"><img src="tn_sea-stones.jpg" alt="sea stones"><div class="lightbox"><div class="light"></div><div class="box"><img src="sea-stones.jpg" alt="sea-stones"><h2>Sea stones</h2></div></div></a>
<a href="#url"><img src="tn_Sunset-in-the-Forest.jpg" alt="Sunset in the Forest"><div class="lightbox"><div class="light"></div><div class="box"><img src="Sunset-in-the-Forest.jpg" alt="Sunset in the Forest"><h2>Sunset in the Forest</h2></div></div></a>
<a href="#url"><img src="tn_winter_blooming_miracle_1.jpg" alt="Winter blooming miracle"><div class="lightbox"><div class="light"></div><div class="box"><img src="winter_blooming_miracle_1.jpg" alt="Winter blooming miracle"><h2>Winter blooming miracle</h2></div></div></a>
<div id="close"></div>