How to Make a Lightbox in CSS

A light box is the term used for the method used to divide the presentation of special pictures or web site notices to a user on a website. The common programming practice for creating a web page lightbox has become to utilized cascading stylesheets (CSS)to create a light box in order to keep the data from the web page separate from the style of display contained within the CSS. Creating a lightbox consists of setting up a storage structure followed by defining the web pages behavior for display of the picture or special message.

Things You'll Need

• Text Editor

Instructions

1. Open your computer's text editor and paste the following CSS code into the file in order to setup the container structure to be used for the lightbox.This code sets up several nested boxes that will comprise the structure of a lightbox. Copy this code:
   <div class="onView">On
   <div class="offView">Off</div>
   <div class="viewBox"></div>
   <div class="content">
   </div>
   </div>

2. Add the following statements to the CSS file before the nested box structure entered in step 1. These CSS functions will be used to define the behavior of the lightbox based on the user action on the web page. These are the statements to add:
   .onView {}
   .offView {}
   .viewBox {}
   .content {}

3. Fill the function definition for the .onView function with the following information. This will change the view of the webpage to display the lightbox with a change in background in the web page when the light box is activated and reset the view when it is inactive. This is code information to use for this function:

   .onView {padding:4px; width:30px; background:#999; border:#333 solid; border-width:2px;}

   .offView { display:none;}

4. Define the viewBox and page content fucntions to change the web page's display for the baseline content of the page as well as the desired look and feel for the lightbox by entering the following code int the CSS document:

   .viewBox {
   width:100%;
   height:100%;
   float:center;
   position:relative;
   z-index:100;
   background-color:#999999;
   top:0px; left:0px; right:0px; display:none;
   opacity: .80; }

   .content {
   width: 620px;
   height: 400px;
   border: solid 2px #fff;
   background: #ccc;
   margin-top: 15px auto;
   position:relative;
   z-index:200;
   top: 30px;
   display:none;
   padding:10px;
   }

5. Add two additional CSS rules to implement the dynamic lightbox functionality of the web page based on the user's actions with the computer mouse to the bottom of the CSS file:

   .onView:hover div, .offVoew {display:block;}
   .offVoew:hover + .viewBox {display:none;}

6. Save the CSS file and upload to your website to view your newly created lightbox.

References

• How to create a lightbox using Javascript
• Alternate Guide to Creating Lightboxes Using CSS

Resources

• How to create a lightbox using Javascript
• Alternate Guide to Creating Lightboxes Using CSS