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

<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.

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.

Post filed under: css, xhtml.

Skip to comment form.

  1. José Mota says:

    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.

    Either way, the concept is really good. Congratulations, perhaps this idea will be taken into account for other purposes.

  2. Jan Hančič says:

    Very nice work!
    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 …
    And no graceful degrading off course :)

  3. It also breaks the back button

    the concept is proven though.. keep hacking

  4. 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.

  5. Jeremy says:

    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.

  6. …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.

  7. klojniewski says:

    doesnt work in ie6 :)

  8. ThatWebGuy says:

    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

  9. ThatWebGuy says:

    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

  10. @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.

  11. ThatWebGuy says:

    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.

  12. gilles says:

    hi man,

    ms ie7 does not work
    opera 9.64 ok

  13. Cezz says:

    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…

  14. Cezz says:

    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.

  15. …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.

  16. Chris Pratt says:

    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.

  17. neeraj says:

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

  18. Acrylic Style says:

    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.

  19. designiks says:

    really nice presentation…

  20. Aarron says:

    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.

  21. 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.

  22. Aarron says:

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

    thanks

  23. 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.

  24. 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.

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

  26. Aarron says:

    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.

  27. MartijnGP says:

    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

  28. @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.

  29. Aarron Tame says:

    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

  30. Bernadette says:

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

  31. cssaba says:

    I like it. But why have “close” link to the nonexistent fragment #close? I wonder if there’s a defined behavior when the target fragment doesn’t exist. Browsers might scroll back to top (as with “#”) or ignore the fragment change. Shouldn’t the target for “close” be the id of the thumbnail?

    Firefox shows scrollbars when closing the overlay. To get rid of them:

    .overlay a:active { outline: none; }
  32. cssaba, yes I believe the behaviour of a non-existant fragment identifier does behave the same as doing “#”. You could have close as a hidden element near your gallery so it doesn’t jump to the top.

    I’ve since updated futurebox twice now.

    The follow up to this article adds more functionality, http://www.thecssninja.com/css/futurebox2.

    The 3rd version revision uses a completely different technique, http://www.thecssninja.com/css/futurebox3

  33. aldo says:

    Simply and Great! Thanks!

  34. Gerardo says:

    In mobile safari for iphone it is not possible to close the futurebox, but is awesome iframe worked in there.
    Congratulations

  35. Adria Mooney says:

    I found a simple way to add a nice fade in transition:

    .overlay img
    {
    padding: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    background: #ffffff;
    opacity:.1;
    }

    .overlay:hover img {
    -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    opacity:1;
    }

  36. Rod says:

    I have used futurebox to load a contact form in a php file into the iframe. Is there a way that on closing the iframe the content of the contact form will be reloaded to its original state?

  37. Biri says:

    It’s great. I have used futurebox for a long time. But my problem is that if you click on lightbox or any other area on the screen, lightbox gets closed. it also has no animation but I guess I found one with this features:

    http://en.koddostu.com/2014/01/pure-css-lightbox-without-javascript.html

    Hope you can add these futures to your Futurebox too.

Leave a comment