Studio moh

Current Javascript solutions for LightBoxes are kind of cumbersome, bloated, and CPU-intense.

Unsatisfied with the current state of LightBoxing, I developed a pure, organic, CSS-powered LightBox. Absolutely zero javascript. All of this under 1kb.

Click here to preview the CSS LightBox

The core of Multi-state CSS is the :target pseudo class. When a user clicks a page-anchor the :target pseudo class is activated, revealing the lightbox element. Here’s the code:

div.lb {
display: none;
}
div.lb:target {
display: block !important;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
background: url('screen.png');
position: fixed;
padding: 2em;
}