Click here to preview the CSS LightBox
Finally, a lightbox that doesn’t require Javascript! And now it support IE5+!
The core of Multi-state CSS is the :target pseudo selector. When a user clicks a page-anchor the :target pseudo selector is activated, revealing the lightbox element.
IE5+ doesn’t support the :target pseudo selector, but it does support CSS expressions. With this in mind, we can write a carefully crafted expression that mimicks :target.
Here’s the code:
div.lb { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; text-align: center; background: url('screen.png'); } div.lb:target { display: block; } /** IE doesn't support :target, so we use CSS expressions **/ div.lb { display: expression((document.location.toString().split('#').slice(1) == this.id)?'block':'none'); }