Pure css lightbox

What is a lightbox ?

To put it simple lightbox is just like a popup message that pops when you click on something or some link 

Thanks to  Devin R. Olsen for this awesome tutorial .

Original tutorial link 

 

A light box is web slang for a way to divide and present such things to your viewers as pictures in a gallery or special site notices. Today I wanted to quickly show you how to create a pure CSS light box. Lets start with our light box structure.
Create a new document and add the following:

Here we have a few nested div boxes that make up the structure of our light box. Each division box (div) has a specific class.

We have four elements with the following classes.

[onLight] Any text directly within the onLight class is displayed as the element that turns on the actual light box so this could be anything from pictures to text or whatever.

[offLight]Anything in the offLight class is what displays as our button to turn off our light box so even this could be images or content.

[lightBox]Light Box class is purely for structure and style, so always add your light box content within the class “content”.

Ok I hope I didn’t lose any of you out there I just really wanted to break down the structure so we may get a clear understanding of our CSS that performs all the function behind our pure CSS light box.
With that done let’s move onto our light box’s CSS.

First add the following to the head of your document.

Ok let’s break down each rule and their functions before we move onto the style properties that they encompass. We have the following important css rules:

This is the rule that makes up our light box’s content area.
Ok now that we have our basic CSS rules let start to populate them with the important style properties and make this light box work.

Make these onLight and offLight classes look like the following:

Our onLight class has styles that help for the purposes of this tutorial make our onLight look like a button. So every style property in this class can be completely customizable to your needs.

Next we have our offLight and it too has a majority of styles that meant to make it look like a button. The only very important styles here that we must focus on are the z-index, display and position styles. we use a position of absolute to position our offLite element anywhere we would like around the actual light box its self.
We also use a z-index of 200 to make sure its order of rendering hierarchy is high enough to be visible when our light box is active. our last is the display style and its set to none in order to make sure our offLight is not visible until told so.

Ok lets move onto the last two class and their css styles.

Ok there is a lot to break down here so I am only going to cover the important styles and leave the rest up to you the developer to decide.

.lightBox is set to a width of a 100% and a height of a 100% to take up the whole pages dimensions to create our light box’s background or rather canvas. we in conjunction of width and height also use a position of absolute to break our light box out of our structured flow to help not destroy our overall structure when the light box is active. We also have a z-index of 100 to again give set the order of our rendering hierarchy to be high enough that its layered over our document.

Ok the lightBox rule also has two important rules that are for an opacity CSS feature that makes our light box canvas or rather background transparent. We have to declare our opacity twice, one for IE and another for all other browser. I have my settings set to 80% opaque. There are also additional top and left styles that position our lightBox to start in the upper left hand corner of our document and then proceed onto height and width of a 100%;

.content again most of these are set to my preference here for this tutorial so I will only cover the most vital styles. We set a position of absolute and z-index to our content rule to again position and layered the content box above all other layers. Display is set to none to hide the content element from viewers until told otherwise.

Ok we have just a few more rules that involve some in dept talking in order to give our light box proper functionality. So add these rules to our CSS now.

Our first new rule uses a CSS2 hover pseudo class to control the visibility of our light box upon user interaction with our .onLight and .offLight elements.
Basically we point to our .onLight element and state if its being hovered to locate our .offLight element and turn it’s display none to display block.

Next we are not only using a pseudo hover class but an adjacent sibling selector. We are first pointing to our
.onLight element and state that if we hover over it to locate its previous or next sibling element “.offLight” and turn its display to none.

So think of these last two rules as the on and off functions for our pure CSS light box.

We have one final css rule we must add to help with some browser issues and our height of a 100% in our.lightBox.

Add this last rule to our style.

With this last rule we set both our html document and its body tag to be a height of a 100%. Once you do this any immediately nested element will to be able to use a height of 100%.

NOTE: THIS PURE CSS LIGHT BOX IS ONLY CSS2 COMPATIBLE THEREFOR WORKS ONLY ON IE7+ FF1.0 – 3.0 AND SAFARI. THIS MEANS THIS METHOD OF LIGHT BOX WILL NOT WORK WITH IE5.5 OR EVEN IE6 WITHOUT THE USE OF JAVASCRIPT.

BECAUSE WE RELY ON THE CSS2 SELECTOR, NOT EVEN A PSEUDO HOVER FIX FOR IE5 AND IE6 WILL FIX THIS METHOD.

 

Live Example