Futurebox, lightbox without the 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.

 

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


	The CSS Ninja



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.

Further reading

Think Vitamin has a good write up on the :target pseudo class – Stay on :target.

Arve Bersvendsen, an Opera developer, has a good proof of concept on his personal site to change the stacking order of draggable windows using :target.

CSS3.info has a good compatibility table showing browser support for CSS3 selectors.