Futurebox, lightbox without the JavaScript

Jun 20

I was playing around the other day and had a bright spark. Is it possible to do the “lightbox” effect without JavaScript? The answer is yes! Thanks to the :target pseudo class. Without further ado I introduce Futurebox.

View a live demo Download the source files

Update: New version of futurebox has been released.

Have updated the demo so now the entire screen area is clickable to remove the Futurebox. I have also refactored the mark-up so it is a bit leaner. The previous demo can see here. Ran it through Browsershots to see what browsers it works in.

Futurebox?

I’ve aptly called it Futurebox because this is only a proof of concept, it only works in the better browsers but never the less is a cool look at a useful CSS3 technique. The following browsers have been tested and will work with this example, it may also work in earlier versions of the browsers listed but I have not yet tested in them.

Firefox 1.5+
Safari 3.2+
Chrome 2+
Opera 9.5+

How does it work?

As mentioned above the whole thing is only possible due to the CSS3 :target pseudo class. It all works by getting the anchor link in a URI which can be referenced in your CSS using :target. If an element has an id that matches the URI the styles applied to it will come into effect. I’ll break down the above example so we can get a better look.

The xhtml

<a href="#futurebox_img1">
	<img 
		src="gr_ninja-attack_med.gif" 
		width="100" 
		height="102" 
		alt="The CSS Ninja" 
		id="futurebox01" 
	/>
</a>
 
<div class="overlay" id="futurebox_img1">
	<a href="#close" title="Close future box">
		<img 
			src="gr_cssninja_lrg.png" 
			alt="The Css Ninja" 
			width="600" 
			height="639" 
		/>
	</a>
</div>

Pretty simple mark-up we have our thumbnail image which links to an anchor link. The overlay image has the id that we are linking to on the thumbnail. The overlay mark-up has 2 divs around the image to horizontally and vertically centre the image. We have another anchor tag around the large image this is so we can “close” the overlay.

The CSS

html, body { height: 100%; }
 
.overlay
{
	width: 100%;
	height: 100%;
	position: absolute; 
	top: 0; 
	left: 0; 
	display: none; 
	z-index: 999;
	background: rgba(0,0,0,0.7);
}
	.overlay a
	{
		display: table-cell; 
		vertical-align: middle; 
		text-align: center;
	}
		.overlay_container img
		{
			background: #ffffff;
			padding: 10px;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
		}
 
.overlay:target { display: table; }

The overlay class is position: absolute so it can sit over the content, it is expanded to 100% width and height and has a background: rgba() applied so we get that nice transparent overlay look. Not all browsers support rgba that work with this example, for those no background colour will appear. Initially it is set to display: none.

overlay_container class The anchor tag has display: table-cell so it will act like a table cell, vertical-align: middle is applied give us the ability to vertically centre anything within this container and finally text-align: center so we can horizontally centre any inline elements. The entire screen is now clickable by styling the anchor this way making it more inline with how lightbox works.

The image has padding, background and for the supporting browsers we set rounded corners using border-radius. Since images are naturally inline elements, we can avoid setting margin: 0 auto and a width on the image to centre it (text-align: center on the previous container handles that for us) making this technique more flexible.

Finally the magic that allows this technique to work is very simple we target the overlay we want to display by using :target, the user clicks a thumbnail which has a link to #futurebox_img1 the :target pseudo class will look for any elements with the id of futurebox_img1 and set it to display: table, for a more in depth look at the css table property check out my previous article. We use table rather than block so the styles setup on the overlay_container class will allow us to horizontally & vertically centre the image.

[...] Futurebox, lightbox without the JavaScript | The CSS Ninja – All things CSS, Javascript & … "I was playing around the other day and had a bright spark. Is it possible to do the “lightbox” effect without JavaScript? The answer is yes! Thanks to the :target pseudo class. Without further ado I introduce Futurebox." Pretty awesome tool. (tags: css3 css webdesign lightbox) [...]

links for 2009-06-20 | Yostivanich.com, June 21st, 2009

It also breaks the back button

the concept is proven though.. keep hacking

Jedediah Smith, June 21st, 2009

Thanks for all the comments.

Using CSS is a good concept, although AJAX really turns it up some notches with various types of content you can put in a modal box like this. Ya know, larger images (not to mention if you downloaded all big images within a single request it would be kinda heavy), forms, other HTML, etc.

Most definitely, JavaScript would be the obvious answer to really make this something special and enhance its capabilities, but I really only wanted to prove it could be done without it.

I see one problem though: big images are loaded even if the user will not see them (he will not click on the thumbnail), which slows down the page load

Yeah that would be an issue, but this could be fixed using JavaScript to dynamically load the images. The core concept is still kept in tack.

It also breaks the back button

I guess this could be seen as both a benefit and an annoyance at the same time. On one hand you can scroll back through the images with the back button, on the other you might just want to get back to the last page and you have to go through all the images you looked at again.

The Css Ninja, June 21st, 2009

Great demo. Kinda surprised by this :target feature, didn’t know about it. The only problem I see right now is not being able to go back by clicking on the black transparent zone.
The fact that it loads all the big images is not that harmful. And as you said, you can use JS to dynamically load them and still have the CSS feature working w/out JS.
Plus, I think being able to go back with the back button is a benefit.

Jeremy, June 21st, 2009

…The only problem I see right now is not being able to go back by clicking on the black transparent zone.

Very good point, I’ve updated the demo and the whole entire area is clickable and will close the Futurebox now. Plus I refactored some of the mark-up so it’s a bit leaner.

The Css Ninja, June 21st, 2009

doesnt work in ie6

klojniewski, June 21st, 2009

Excellent concept and I’m excited about it, but your demo doesn’t work for me when I try to close the image. All that happens is horizontal and vertical scroll bars appear when I click to close.

Firefox 3.0.11

ThatWebGuy, June 21st, 2009

FYI doing some further testing of the demo:

Firefox: Not working
IE8: Not working (or in compatibility mode)
IE7: Not working
IE6: Not working
Chrome: Works
Safari: Works
Opera: Works, but no transparancy

ThatWebGuy, June 21st, 2009

[...] La gente de TheCSSNinja ha desarrollado un sistema para conseguir emular el efecto lightbox mediante CSS3. [...]

Futurebox, el lightbox sin Javascript | aNieto2K, June 21st, 2009

[...] La gente de TheCSSNinja ha desarrollado un sistema para conseguir emular el efecto lightbox mediante CSS3. [...]

Futurebox, el lightbox sin Javascript : Blogografia, June 21st, 2009

@ThatWebGuy – ~~Which version of Firefox are you using?~~ Should of read your inital comment I’m using 3.0.11 on Vista and it works fine, I do get the scroll bars but the overlay disappears along with the scroll bars once clicked. I’ve tried on my machines (Vista & XP) v1.5, 2.0.0.20 & 3.0.11 and it works except for the transparency on v1.5 & 2. IE was never going to work as it doesn’t support any CSS3. Opera ~~9.5~~ 10 beta and up support rgba transparency.

The Css Ninja, June 21st, 2009

I’m on my laptop this time and it works fine. Very odd. Both machines are same version of Firefox on Windows 7. I guess something strange was happening on my other machine. Nice Work BTW.

ThatWebGuy, June 21st, 2009

hi man,

ms ie7 does not work
opera 9.64 ok

gilles, June 21st, 2009

[...] Futurebox, lightbox without the JavaScript | The CSS Ninja – All things CSS, Javascript & … — 12:34am via [...]

Squirrel Hacker » Daily Digest for June 21st, June 22nd, 2009

[...] Visiter le Site officiel [...]

lightbox CSS | WebCssDesign, June 22nd, 2009

[...] Futurebox è una specie di lightbox ma senza javascript, 35 plugin per Firefox utili ai web designers e [...]

Dario Salvelli’s Blog » Blog Archive » Feedmastering #152, June 23rd, 2009

Love this demo have seen another version that I am currently using however, with the images, if you change the markup slightly to be…

<a href="#close" title="Close future box" rel="nofollow"></a>

Then change the display:table to the loading div and just set the overlay to display:block… Set a loading image to the center of the anchor tag…

Cezz, June 23rd, 2009

Sorry about double post but my point above is that if you set the image as a background then it will only load once the div is shown and wont load massive amounts of images that are hidden.

Cezz, June 23rd, 2009

[...] Une version de la lightbox sans javascript : http://www.thecssninja.com/xhtml/futurebox [...]

Veille en vrac, June 23rd, 2009

…my point above is that if you set the image as a background then it will only load once the div is shown and wont load massive amounts of images that are hidden.

Yeah I have looked at that myself, doing background instead, and you get the benefit of lazy loading. You do however lose the ability to apply the border-radius style but definitely a good point.

The Css Ninja, June 24th, 2009

[...] è riuscito a trovare un’alternativa utilizzando solamente codice HTML e [...]

Futurebox: Lightbox Senza Javascript! | Fedeweb, June 24th, 2009

This doesn’t work Pure CSS in IE but it could be made to through behaviors. All in all, it’s a very good proof of concept. The only true limiting factor is the back button pollution, which unfortunately cannot be alleviated since it’s at the core of how this works.

Chris Pratt, June 26th, 2009

[...] proyecto se llama FutureBox y tiene muy buena pinta, podéis ver una demo totalmente [...]

FutureBox, un LightBox sin Javascript | Emilio - Consultor SEO, June 29th, 2009

firiend this is very nice . but its have a very little probs. its wasn’t work in the ie 7.0

neeraj, July 17th, 2009

You should be able to add Internet Explorer support through [IEs horrible and proprietary] CSS Expressions.

We have this code on our site (with your CSS lightbox) to add IE support.

.overlay {
	display: expression((document.location.toString().split('#').slice(1) == this.id)?'block':'none');
}

^The only problem is it doesn’t work with IE8 as they’ve removed CSS expressions from 8.

Acrylic Style, August 3rd, 2009

[...] Futurebox, lightbox without the JavaScript Triple Block [...]

CSSハックマニアその1 | Nutspress, October 1st, 2009

really nice presentation…

designiks, December 1st, 2009

very nice, i love this, it works very well and have had no problems, the one thing that i am having trouble with is getting a discription of the image to appear in below the image in the overlay.

If you could help that would be great thanks.

Aarron, December 9th, 2009

I’m working on Futurebox v2 which adds more functionality, including having a small description appear below the image. Article will be up soon so stay tuned.

The Css Ninja, December 9th, 2009

excellent that sounds awesome, can you give more on the date of release and additional functions

thanks

Aarron, December 9th, 2009

Sure, these will be some of the following features:

Lazy loading
Image descriptions
Keyboard navigation
Next and previous buttons

There’s still a bit I need to work on so it’s hard to give a firm release date.

The Css Ninja, December 9th, 2009

You should add CSS transitions to v2.

Currently only Chrome and Safari support them, but Firefox will be getting support for the feature in 3.7 and Opera will be getting support in it’s next release.

And it’ll make up for the lack of Lightbox style animation.

Hugh Isaacs II, December 11th, 2009

Yes that’s on the list of potential things to add to it.

The Css Ninja, December 11th, 2009

You should also have a look into getting it to work in IE, I believe that if you did this it would make the code a lot better and more efficient.

Aarron, December 11th, 2009

Hey there, for the past few days I’ve been looking into this as well. Then, when I was done, I decided to Google it and find your project. It’s essentially the same as mine. I developed mine a bit further and made it work for all major browsers (Chrome, Opera, Firefox and IE7 and 8). If you are interested, you might want to take a look at it, or throw me an email.

http://www.martijngp.nl/development/csbox/csbox.html

MartijnGP, December 16th, 2009

@MartijnGP – Nice work looks good.

Although if JavaScript is disabled in IE the expression you’re using doesn’t work. Come IE9, which I imagine won’t have compatibility mode, this will break as I’m sure you’re aware expressions have been removed.

The Css Ninja, December 16th, 2009

I agree i does look good, but i am a fan of you work ninja and work like to continue useing to stuff and cant wait for the V2 of Futurebox

Aarron Tame, December 16th, 2009

I can’t figure out how to use it. I think I’m doing the “HTML” version wrong.

Bernadette, January 27th, 2010

Subscribe to RSS feed Follow the ninja

Categories
css
html5
javascript
rant
xhtml

Futurebox, lightbox without the JavaScript

Futurebox?

How does it work?

The xhtml

The CSS

Further reading

Leave a comment