Full CSS3 Lightbox - Absolutely no JavaScript

I've been tweeting this today but I think it could be useful to repeat it here: my CSS demos are only experiments. The goal is to test all those new possibilities, show the power of CSS3 and, basically, having fun. They aren't intended to be used in production and actually you shouldn't. Most of them are not accessible and not cross browser…

So I will get lightboxed even with my no-javascript browsing habits? I liked that most sites simply serve the direct image url to me. Lightbox is an annoying eye-candy.

Dont like how when i press the back button i get a history of pictures i have viewed. If i am at liberty to choose whichever picture i want then i dont need the back button to preserve my selection history. When i click back, i want to go BACK to the site i just came from.<p>I assume this isnt some bug or some flaw, and that it can probably be coded to behave differently, but as things stand that would prevent me from using this particular lightbox.

Is it just me or is the Lighbox effect really annoying? What's wrong with middle-clicking an image and having it open in a new tab?

Nice! It breaks the back button however...

Neat that you can do that. Not a technique that I'd ever want to use.

Works great in Chrome; Firefox has a border around each pic, since they're links.<p>Of course, it's horribly, horribly broken in IE. Then again, that goes without saying ;)

Interesting to see this is possible, but this is beyond what I would want to use css for, how far will "look ma! no javascript!" go? Seing the logic in a jquery click handler seems at least as readable / maintainable as a bunch of css rules for the same reason I prefer to have more logic in java in android applications than in various xml layout and manifest files.

This is pretty cool. Suggestions:<p><pre><code> - respect my back button [1] - allow me to click outside the picture or press esc to close the lightbox - allow middle-click to open the image directly </code></pre> [1] We can argue about transitions and correct behavior all day, but this implementation is different from other lightboxes I've seen, and thus it is "broken" to me.

Out of curiosity, what is the point of a "light box"? I tend to open lots of images into new tabs while I'm reading articles, and it's <i>really</i> annoying to have the rest of the article go black when I do.

Very neat, I checked out the other stuff you've got on there and it's pretty sweet.<p>Seems like a lot of people have missed the point that this is just a hack to see if a light box in JUST CSS and HTML could be made. Because theres no JS or actual logic, this demo just leverages the browser to maintain the state. It's a necessary side effect that the back buttons behave this way, and it <i>could</i> be coded to behave differently, but that would defeat the purpose of the exercise.

Works beautifully on the iPad. Very nice work.

It's done by using the :target selector. Targeted images are lightboxed. There is a link in the lightbox that resets the target to dismiss the lightbox. Crudely:<p>css: a.lb:target {display:block; text-align:center;} a.lb {display:none;}<p>html: &#60;a href="#img"&#62;show image&#60;/a&#62; &#60;a class="lb" href="#" id="img"&#62;&#60;img src="image.jpg"&#62;&#60;/a&#62;

This is actually quite nice because it allows permalinks to the lightbox items. This makes for a rough browsing experience if you need to go back, but I like the detail that lets you link somewhere that someone can actually find in the future vs. "go to this page, then click here, etc...."

Looks great. Does this work cross-browser? (besides the transition effect)<p>Also, is there any documentation/github repos?

Does anybody know of a minimalist JS variant? There are so many JS lightbox versions I don't even know where to start. I need something super simple.

If you go up a directory, there are some other neat things in CSS:<p><a href="http://playground.deaxon.com/css/" rel="nofollow">http://playground.deaxon.com/css/</a>

kind of annoyed me there was no explanation.<p>- 2nd UL list is opacity:0 - :target psuedoclass applies to element whose id is in the url - targeted element has opacity:1

The problem is that not all browsers support CSS3.

can someone post a screenshot of this in IE6

Slow, like all lightbox implementations. And the flash of the background color is likely to give someone a seizure. (Ok, I'm being facetious there, but it looks jerky.)