Comments on: Futurebox, lightbox without the JavaScript

By: Adria Mooney

Adria Mooney — Wed, 02 Nov 2011 03:17:15 +0000

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;
}

By: jQuery Tipps, Tricks, Artikel & Techniken | CSS3 Toolbox

jQuery Tipps, Tricks, Artikel & Techniken | CSS3 Toolbox — Wed, 13 Jul 2011 18:57:29 +0000

[...] Futurebox, Lightbox Without the JavaScript [...]

By: jQuery Tipps, Tricks, Artikel & Techniken | CSS3 Guru Blog

jQuery Tipps, Tricks, Artikel & Techniken | CSS3 Guru Blog — Sun, 10 Apr 2011 19:34:51 +0000

[...] Futurebox, Lightbox Without the JavaScript [...]

By: jQuery Tips, Tricks, Artikles & Techniques | jQuery Guru

jQuery Tips, Tricks, Artikles & Techniques | jQuery Guru — Wed, 26 Jan 2011 08:13:10 +0000

[...] Futurebox, Lightbox Without the JavaScript [...]

By: Gerardo

Gerardo — Mon, 03 Jan 2011 18:39:40 +0000

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

By: aldo

aldo — Mon, 17 May 2010 17:02:09 +0000

Simply and Great! Thanks!

By: The Css Ninja

The Css Ninja — Tue, 27 Apr 2010 00:49:25 +0000

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

By: cssaba

cssaba — Mon, 26 Apr 2010 21:09:35 +0000

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; }

By: Bernadette

Bernadette — Wed, 27 Jan 2010 01:37:56 +0000

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

By: Aarron Tame

Aarron Tame — Tue, 15 Dec 2009 23:57:38 +0000

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