When considering common website elements created in jQuery I thought about lightboxes; often used on e-commerce sites to highlight products. Although jQuery would be the best solution for this I decided to step away and explore another method of such a widely used and simple feature.

With the new wave of browsers giving great compatibility for CSS3 it seems logical to go about using some of the great new selectors it has to offer.

In CSS2 you would have had to create a repeating background png to achieve transparency, whereas you can now use rgba alpha to set the level of opacity of the lightbox overlay.

I started off with hiding the overlay div with the standard “display:none” setting. Jquery would usually be brought in at this point to bring the content in when a link is clicked but this is now achievable purely in CSS using the :target selector. It allows you to style a specific element if its ID matches the identifier in the address bar. So in this instance you select a link which adds #lightbox to the url; at which point the #lightbox:target styling in the CSS applies and the div is displayed absolutely over the existing contents.

So although I love the level of customization that jquery gives for websites, CSS3 can be a great time saving alternative for these simple tasks.

Take a lookat the demo here