Great CSS Effects #2

Lightbox effect is very useful because it pulls the attention of the reader towards the image. It does this by bringing the image to the center of the screen and darkening around it. This is great for pages that have a lot of pictures, because it allows the visitor to view each image separately. But this technique applies to more than just images. This effect will also work with text and logins as well. There is some Java involved but the effect itself it caused by CSS. To see this is action click here.First you are going to have to add some code to your CSS file. Copy and paste the code from below.

.black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; border: 8px solid blue; background-color: white; z-index:1002; overflow: auto; }

The black_overlay is the class that will create the fade effect. It will not display normally because the display is set to none. One of the other uses is to load on startup for a login page. The white_content class is actual box the image or whatever you use will sit in. This layer is set to overflow auto meaning that if your image/text is larger than the box than it will become scrollable. The border in this section is the border around the lightbox, I chose blue because it goes with my colors. Now we have to add in the HTML to make this work. Copy the snippet below into your HTML file, in the BODY element.

<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="snowflake_thumb.png" border="0px" /></a> <div id="light" class="white_content"><img src="snowflake.png" height="270" width="360" /> <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div> <div id="fade" class="black_overlay"></div>

The code above is what is used in the example. Here is a quick breakdown of the code :

• The first line is the code that displays your original image.
• The second line is what dispays the larger image, inside of the lightbox.
• The final line is the code that adds the white and black layers and creates the code to close the lightbox.

You can get the CSS, HTML and images here to experiment with. Feel free to use this code to enhance your site. In the next part of the series we are going to discuss ways to alter your visited links with CSS.