Build 10 games and learn game development along the way in this fast paced game development course

Get the source code of 12 commercial games, loaded 50+ million times, and learn the secrets of game design

Learn how to make a successful Flash game from a real world example. Fully commented source code

Create realistic Flash physics games from scratch with advanced features, from Angry Birds to Crush the Castle

Create a Lightbox effect only with CSS – no javascript needed

You may call it Lightbox, or Greybox, or Thickbox, but it’s always the same effect.

When you are on a page, and click on a photo or trig some event, a Lightbox is an effect that fades the pagein the background to show you new content in the foreground.

I mean this effect

Lightbox

In the upper example, when clicking on a photo the site fades to black and shows the photo, in the lower one when clicking on “login” the site fades to white and shows the login form.

There are tons of Lightbox scripts in the web, each one with its unique features and limitations, but all require massive use of Javascript or the installation of javascript frameworks.

In some cases, there are “lightweight” versions with “only” 40KB of Javascript.

This example does not want to compete with those scripts, but if you are looking for a simple, 100% CSS, 0% javascript lightbox, this may help you.

Features of this Lightbox:

100% CSS as said
You can insert any content in it (some scripts out there only allow images) and easily upload your codes to your web hosting provider.

That’s all. Did you need something more? Think wisely…

Let’s start with the CSS

The black_overlay class is the layer that will make the web page seem to fade. It’s a black 80% opaque background as long and wide as the browser that will overlay the web page (look at the z-index) and at the moment is not shown (look at the display).

The white content class is the layer with the photo/login screen/whatever you want to appear in the Lightbox overlay. It’s a white layer to be placed over the black_overlay layer (look at the z-index, greater than the black_overlay one). The overflow allows you to have a scrollable content.

In the html file, put this line just before the tag

Now, trig the action you want to open the Lightbox and insert this code:

For example, in a link would be:

Remember to include in the lightbox the code to close it, for example

A complete example page could be

That you can find up and running in this page.

In this example everything is static and preloaded, but you can easily add some php/ajax code to make it more dynamic while keeping the effect 100% CSS based.

Hope you will find it useful, should you use it in one of your works send me a comment and I’ll feature your site as example.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (941 votes, average: 4.46 out of 5)
Loading ... Loading ...
Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 619 comments

  1. Ben

    on August 22, 2007 at 6:54 pm

    Erm… no javascript? That title is very misleading. It’s a nice concept, and a good lightweight alternative to the libraries that are out there, but there is definitely javascript involved, and it’s non degradable.

  2. Universe_JDJ’s Blog » Screw Javascript - Use CSS to create a lightbox effect

    on August 23, 2007 at 11:42 am

    [...] read more | digg story [...]

  3. Izzy

    on August 23, 2007 at 12:40 pm

    Yes, the title is misleading… maybe somthing more like “Lightweight lightbox with CSS”, seeing as there are atleast two lines of javascript… and maybe 75% CSS, 25% Javascript would be a more appropriate range.

    A fantastic bit of code though, almost as good as some scripts I have seen, however, it doesn’t have a smooth fade, which could be added by having two darkening divs each on say 40% opacity, one opens on the click and the other on the loading/displaying of the lightbox perhaps… not sure how to do that myself, but I’m sure it can’t be too javascript intensive.

    –Izzy

  4. Sigh

    on August 23, 2007 at 12:48 pm

    Don’t you get it? By ‘no Javascript needed” he means “not that many Javascript needed”! Sheesh. By the way, the lightbox was great…

  5. Live TV

    on August 23, 2007 at 10:17 pm

    Ok well it does use JavaScript, but give him a break it’s still pretty good and maybe the title should have been “Create a Lightbox Effect with CSS and a tiny bit of JavaScript” but that probably wouldn’t have sounded as good.

  6. Kyle Fuller

    on August 23, 2007 at 11:38 pm

    The title says “no javascript needed” yet there was javascript. This is misleading, maybe you should change the title. Still it is good, very little javascript instead of most of it javascript.

  7. um

    on August 23, 2007 at 11:42 pm

    Most of the JavaScript effects also include many other options, such as automatic sizing, etc. ALL of them use CSS. How this got on Digg I have no idea.

  8. velinn

    on August 23, 2007 at 11:43 pm

    He did make a mistake with the title, but I think what he meant was that there is no Javascript framework necessary. Think Prototype, script.aculo.lus, etc. Some of these weigh in at almost 300k.

    Using two lines of standard javascript isn’t quite the same thing.

  9. Russell Heimlich

    on August 23, 2007 at 11:49 pm

    The main lifting of the Javascript is to manipulate class names. You just did what all of the other lightbox scripts do but yours is less bang for more buck. Good try though.

    I’ve been working on a custom lightbox script at work although it is more of a modal pop up since we don’t want the in-your-face fade down. Just a quick “display:block” that turns on and off a div holding the folder positioned absolute.

  10. Eryx

    on August 23, 2007 at 11:50 pm

    Great script! Simple and effective. what is the -moz- in your css? I know it is for Firefox but is it a way to comment?

  11. Foo

    on August 23, 2007 at 11:52 pm

    in mozilla, you could add a :hover class, and it would work without js. might be a little hard to use, though.

  12. Sashidhar Kokku

    on August 24, 2007 at 12:11 am

    I tried using this sample for a form based webpage.
    If I use a server side button, and a click-event handler for it will close it irrespective of any other action.
    This implementation of the lightbox is good for a static (display only) webpage.
    Good job though.

    -Sashidhar Kokku

  13. Andreas Blixt

    on August 24, 2007 at 12:14 am

    Yeah it’s definitely not CSS only. It IS possible to make a dynamic lightbox in 100% CSS, but it will be lacking fundamental functionality. I made the following example:
    http://css.mezane.org/lightbox/

    Click the thumb for the lightbox effect. Click outside to close it (this does not work on Safari because it doesn’t seem to pick up on :focus or :active pseudo-classes.) This can be expanded upon to not reuse the image in the document (you’ll notice it disappears while the lightbox is open,) but I made the solution completely degradable (otherwise there could be a second image that’s hidden in the CSS and then shown when needed.) The extra span element is undesirable as well and makes the source code look ugly. I don’t recommend this anyways. A CSS-enabled browser with JavaScript disabled (very rare) will simply have to live without lightboxes.

  14. Clint

    on August 24, 2007 at 1:27 am

    This won’t work if the page has to scroll, man. You need to display this stuff ‘fixed.’ And it’s not very practical with your 25% sizing; images would not be vertically centered.

    Thing is, I think you know that, which is why your example is so simple. And if you want someone like me to donate, make a more robust example that works and I’ll consider it.

  15. Tyler

    on August 24, 2007 at 1:49 am

    Yeah, you should change your title for this post. But your getting a lot of traffic from it so I cant blame you.

  16. Andrew

    on August 24, 2007 at 1:57 am

    You’re just revisiting the days when people didn’t bother to make javascript unobtrusive like they should. This is a step backward, and it encourages other people to take a step backward (or more likely, to not take a step forward). This is the opposite of a contribution.

  17. willie

    on August 24, 2007 at 2:07 am

    Ach, quit yer whinin’, ya bunch o’ babies. It’dunna use JavaScript.

  18. Kris

    on August 24, 2007 at 2:18 am

    Not good.
    1.) It requires javascript to be enabled (this means non-degradeable), it means that the image will not be seen if JS is disabled.
    2.) Why would you want to do this for every object you want to include in a lightbox.

    here
    Close

    When you could just include any of a number of well tested libraries and just do this.

    lightbox

    If it’s size your concerned about I recommend looking into slimbox it uses the mootools framework and is under 7k.

  19. Rawstock

    on August 24, 2007 at 2:30 am

    How about “Lightbox with css and inline javascript only”?

  20. Blake Brannon

    on August 24, 2007 at 2:38 am

    Not totally free but reduced. Nice work here. How about “Lightbox effect with virtually no javascript”

  21. c

    on August 24, 2007 at 2:43 am

    How cross browser is this technique though?

  22. Cadu de Castro Alves

    on August 24, 2007 at 3:04 am

    Hi, Emanuele.

    I improved your technique. I removed all inline JavaScript and wrote unobtrusive JavaScript code. It works very well in Firefox and IE7.

    To make this technique more flexible, I included a function called getElementsByClassName, created by Jonathan Snook.

    See the example

  23. Use CSS to create a lightbox effect

    on August 24, 2007 at 3:29 am

    [...] read more | digg story [...]

  24. Magic Weaver

    on August 24, 2007 at 3:53 am

    Geez… what a dup. I came here thinking it was 100% CSS but only to find it still involved JavaScript.

    Admittedly though it is a nice light weight idea and an alternative to the more fanciful version (lightbox, thickbox, greybox, etc.) out there, but there is a significant difference between this version and the fanciful versions, this CSS version has no graceful degradation should for some reason the client doesn’t have JS turned on or (heaven forbid) a JS incapable browser.

    Still I commend you on a good try, but the next time you come up with something, try not to mislead with your titles.

  25. anon

    on August 24, 2007 at 4:41 am

    I’m going to go against the flow and say the title was accurate. No javascript was needed for the lightbox effect. You do need javascript to trigger the effect.

    Good work, I’m going to use this.

  26. faben

    on August 24, 2007 at 6:32 am

    no javascript? Your a dumbass, your example is exactly how most greyboxes occur.

  27. Max

    on August 24, 2007 at 6:58 am

    I will have to try it out, but that is definitely my biggest frustration, I cannot stand cross browser incompatibility. Has anyone tried to see if this works well in IE, firefox, safari, and opera?

    Max … Out!
    http://www.cmyos.com – free online operating system

  28. Tom Howard

    on August 24, 2007 at 7:13 am

    Close but no doughnut.

    Here is a real “no javascript” lightbox example

  29. Gopinath M

    on August 24, 2007 at 7:49 am

    I’m searching for this script on net for long time. It’s very simple and superb. You are genius(in case if you have written this). Thanks a lot buddy :)

    Cheers
    http://mgopinath.blogspot.com

  30. Mat

    on August 24, 2007 at 8:21 am

    Andreas Blixt > Your CSS lightbox effect doesn’t work with Opera 9.2 browsers.

    Misleading title but good work.
    Thank you

  31. Screw Javascript - Use CSS to create a lightbox effect « v1ruz blog

    on August 24, 2007 at 8:44 am

    [...] read more | digg story Posted by v1ruz Filed in Uncategorized [...]

  32. Dusan Smolnikar

    on August 24, 2007 at 9:14 am

    I don’t know how other alternatives work, but I was working with a lightbox very similar to yours lately. With one difference, I had a few select fields (<select>) on my page, which seemed to overlay everything in ie (ie6 for sure, but I think ie7 as well). They would display over the .black_overlay and .white_content. The only solution I could find was to put an iframe under white_content, which is quite ugly and still wouldn’t fix selects displaying over black_content.

    Has anyone else had a similar problem and found how to avoid it?

  33. Ingus

    on August 24, 2007 at 9:35 am

    If we don’t look at the misleading title there are some serious problems with the code:

    1) if you add more content to the sample page and need to scroll down content and see the box in the scrolled area, you can’t because the absolutely positioned box is above the visible area. And despite the fact that you open it, the visitor does not even notice it.

    2) if you open the box and there’s enough content, you can scroll away the box.

    I prefer jQuery with a modified jqModal plugin.

  34. Lightbox con 10% JavaScript y 90% CSS

    on August 24, 2007 at 9:57 am

    [...] Así es, Emanuele Feronato ha decidido hacer un lightbox realmente ligero, ni siquiera necesita cargar un javascript externo, el lightbox se abre y se cierra directamente desde ordenes tipo onClick en los propios enlaces. [...]

  35. 10668844

    on August 24, 2007 at 10:01 am

    works great, thanks!

  36. Moby

    on August 24, 2007 at 10:04 am

    The “onclick” event is a DOM event. It may call JavaScript, or some other sort of scripting language that may be available to the browser. It may also access DOM attributes and modifiy them, as in this case. But is not necessarily JavaScript.

    http://en.wikipedia.org/wiki/DOM_Events

  37. sazwqa

    on August 24, 2007 at 11:01 am

    well had tried similiar things in the past, but not a foolproof option though. Lightbox and other scripts handle modal window professionally and a far better way, have no issues with almost any browsers and scroll thing.

    I think geeks cud use this script for showcasing but for hard-core wannabes its a sure shot NO !

    ~sazwqa

  38. Sam Liddicott

    on August 24, 2007 at 11:08 am

    href=”javascript:……

    is a wicked sin.

    It should be

    href=”image.jpeg” onclick=”……; return false”

    So if no javascript, folk still get the image.

  39. fLUx

    on August 24, 2007 at 11:22 am

    VERY nice, so nice in fact I’ve started to incorperate it into a site I’m building:
    http://muuveee.com/img/muuveee_login_box.gif
    (I would give you a link to a real demo, but its only currently on my localhost/devbox ;)

    When somebody clicks the “Login” link, up pops the box, click out of the box, it goes again, sweet! ;) and I’ve make it into an element using the framework I’m building, so where ever I need a login link, its ready for me in ~10 characters! =)

    10/10, simple, easy, and quick! Cheers!

  40. Ozh

    on August 24, 2007 at 11:33 am

    Not only your technique DOES use javascript (hell, the *first* thing you gotta see on your example is a link pointing to javascript:void() !!) but it is not even usable with javascript turned off, which is what alternatives are exactly good at.

    Honestly I don’t see the point of this.

  41. Godspeedphi

    on August 24, 2007 at 12:41 pm

    1) This lightbox method uses CSS
    2) This is not new
    3) i just wanted to list 3 things

  42. Simon

    on August 24, 2007 at 1:34 pm

    Yeah, Very misleading, it blatantly uses javascript to show the box, so it is pointless.

    You might be able to get the same effect working by using different overloaders for a:hover and a:visited to get the same effect, but I think the point about the javascript ones were that they do not necessarily load the content until requested, so save bandwidth that way – doing a full CSS option would negate that.

  43. links for 2007-08-24 « squarechick

    on August 24, 2007 at 2:59 pm

    [...] Create a Lightbox effect only with CSS – no javascript needed at Emanuele Feronato (tags: css lightbox webdesign) [...]

  44. » Consigue el efecto ThickBox o LightBox con CSS | Solo Código |

    on August 24, 2007 at 3:00 pm

    [...] ThickBox y LightBox son 2 herramientas programadas en Javascript bastante elegantes a la hora de mostrar fotografías. Pero si no quieres utilizar Javascript, siemore puedes utilizar una alternativa hecha sólo con CSS, como la que ofrecen en Emanueleferonato, en la que tienes explicado todo el código y todos los pasos necesarios para crear el efecto. [...]

  45. Fatih HayrioÄŸlu’nun not defteri » 24 AÄŸustos 2007 Web’den Seçme Haberler

    on August 24, 2007 at 3:26 pm

    [...] Sadece CSS ile lightbox yapımını anlatan bir makale. Link [...]

  46. Prime News Blog » Blog Archive » wonder woman drawings sketches Screw Javascript - Use CSS to create a lightbox effect

    on August 24, 2007 at 3:40 pm

    [...] wonder woman drawings sketches You may call it Lightbox, or Greybox, or Thickbox, but it’s always the same effect. When you are on a page, and click on a photo or trig some event, a Lightbox is an effect that fades the pagein the background to show you new content in the foreground. hot wonder womanread more | digg story [...]

  47. Sean O

    on August 24, 2007 at 4:05 pm

    Another vote for _Misleading title designed for linkbaiting_.
    “No javascript” means… no javascript. Especially not inline, obtrusive javascript.

    @Tom Howard:
    No donut for you either as your linked example is worthless if it doesn’t work in IE, like it or not.

  48. creative component » Blog Archive » Lightbox JS with no JS, just CSS, OK?

    on August 24, 2007 at 4:10 pm

    [...] How-to… http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/ [...]

  49. Screw Javascript - Use CSS to create a lightbox effect - News Doggy - Fetched News

    on August 24, 2007 at 6:06 pm

    [...] You may call it Lightbox, or Greybox, or Thickbox, but it’s always the same effect. When you are on a page, and click on a photo or trig some event, a Lightbox is an effect that fades the pagein the background to show you new content in the foreground.read more | digg story [...]

  50. Jorge Yau » links for 2007-08-24 - Diseñador Web

    on August 24, 2007 at 6:11 pm

    [...] Create a Lightbox effect only with CSS – no javascript needed at Emanuele Feronato (tags: css lightbox webdesign design tutorial web html howto) « The Gang [...]

  51. Aaron

    on August 24, 2007 at 6:19 pm

    You are using JavaScript, fool!

  52. Cartoons Plugin » Blog Archive » final fantasy fan sites Screw Javascript - Use CSS to create a lightbox effect

    on August 24, 2007 at 6:37 pm

    [...] final fantasy fan sites You may call it Lightbox, or Greybox, or Thickbox, but it’s always the same effect. When you are on a page, and click on a photo or trig some event, a Lightbox is an effect that fades the pagein the background to show you new content in the foreground. final fantasy gayread more | digg story [...]

  53. Raspu

    on August 24, 2007 at 8:43 pm

    I haved made exactly the same by my own a few days after visiting this website… =P

  54. A Few Great Tutorials

    on August 24, 2007 at 9:04 pm

    [...] Create a Lightbox effect with CSS, without using any JavaScript! This is one tutorial I am definitely going to try out, because I don’t like to use JavaScript for all those neat effects that are becoming more and more common on websites.Read this tutorial to create a Lightbox effect with CSS. [...]

  55. links for 2007-08-24 : Christopher Schmitt

    on August 24, 2007 at 10:20 pm

    [...] Create a Lightbox Effect Only with CSS It’s a nice effect, but today’s kids want the JavaScript-enhanced animation, too. (tags: css lightbox webdesign design web html tutorial) [...]

  56. Create a Lightbox effect only with CSS - no javascript needed « DayGum

    on August 24, 2007 at 10:55 pm

    [...] >>>>Read more [...]

  57. Jeremy

    on August 24, 2007 at 10:58 pm

    Doesn’t work right in IE with XHTML transitional doctype

  58. Leo

    on August 24, 2007 at 11:46 pm

    *yawn* This is what happens when the person first discovers the idea and starts playing with it. Later you will discover why your implementation is too limited and won’t work in the real world for big web sites. It doesn’t handle IE select bug. I am 70% sure it will break on pages with scroll bars, or will only work OK on some browsers but not the others when the scroll bar is up and the user scrolls the page.

    To get this just right is not that easy. Even a big popular site like reddit.com has a very crappy lightbox. You can scroll down once it appears and click on the page below.

    I actually implemented a lightbox that is more or less bulletproof, but obviously it’s not as lightweight as yours. The idea is that not all javascript is evil. Some of it comes from the fact that you know about web development and are covering more use cases. Just because there is some javascript doesn’t mean the person is just adding bloat. I’m amazed this actually got upvoted so much on digg, since it’s an amateur attempt.

  59. dancecommander

    on August 25, 2007 at 1:05 am

    0% javascript. um no. those code samples you have labeled ‘HTML’ contain pleeeenty of javascript. cool trick through for sure. it does not degrade naturally… yikes.

  60. Jimmy

    on August 25, 2007 at 1:17 am

    How do you do this w/ 2 links and want it to display 2 different items

    Ex. link 1 will display 1 item, and link 2 will display 2nd item.

    Thanks,
    Jimmy

  61. links for 2007-08-24 « napyfab:blog

    on August 25, 2007 at 1:23 am

    [...] Create a Lightbox effect only with CSS – no javascript needed at Emanuele Feronato (tags: css lightbox webdesign design tutorial web development ajax javascript web2.0) [...]

  62. links for 2007-08-24 at Jason P. DeFillippo

    on August 25, 2007 at 6:02 am

    [...] Create a Lightbox effect only with CSS – no javascript needed (tags: css design lightbox) [...]

  63. Trevor Haagsma

    on August 25, 2007 at 6:15 am

    Hi there, very nice post, but im having a problem implimenting it on my website in currently building, it only displays the fade effect on half the website, I cannot get it to cover the full site… is there a solution at all to that or is that the lack of CSS??

  64. How to create a Lightbox effect only with CSS - no javascript needed at fxCraft

    on August 25, 2007 at 1:30 pm

    [...] Read more… [...]

  65. SigT

    on August 25, 2007 at 6:39 pm

    Cómo crear un Lightbox con CSS y sin librerias Javascript

    Los efectos tipo Lightbox para mostrar imágenes o páginas de login pueden resultar muy útiles.

    Cuando se empezaron a utilizar de forma masiva hace cosa de medio año fueron usados de forma tan exagerada que hoy en día parece que hayan desaparecid…

  66. Marc Ashwell » Blog Archive » links for 2007-08-25

    on August 25, 2007 at 11:22 pm

    [...] Create a Lightbox effect only with CSS – no javascript needed at Emanuele Feronato (tags: css lightbox webdesign design html web tutorial) [...]

  67. Crear el efecto de lightbox solo con CSS | Infected-FX| tutoriales, recursos y referencias para desarroladores y diseñadores web

    on August 26, 2007 at 8:38 am

    [...]   [...]

  68. davidMHe Web Site» Blog Archive » Crear El Efecto Lightbox Únicamente Con CSS

    on August 26, 2007 at 2:27 pm

    [...] Visitar la web: Create a Lightbox effect only with CSS – no javascript needed Sindicar RSS 2.0 [...]

  69. Efecto Lightbox con CSS

    on August 26, 2007 at 9:10 pm

    [...] Para implementar este efecto se suele usar un scritp de JavaScritp. Al ser tan pesada la librería este scritp, muchos dejaron de lado el efecto Lightbox ya que lo creían muy lento. Recientemente se ha publicado (sigt también habló sobre esto) otro modo de implementar un Lightbox, que intenta no basarse tanto en JavaScritp y si en hojas de estilo CSS. [...]

  70. Ron Later

    on August 27, 2007 at 1:47 am

    I’m a user not a creator and I rarely comment on other people’s work in a negative way but:
    I have seen very similar years ago when I played around with animated emails.
    I was impressed with such things then but now I’m not, the average user doesn’t care how effects are created or I suspect even notice them.

  71. Tom Howard

    on August 27, 2007 at 4:56 am

    @Sean O:
    I agree it’s useless for real life use, but it’s meant to be a proof of concept to demonstrate what can be done with JS alone. I could have compromised and simulated :target in IE using JS, but that would have defeated the whole purpose of the demo.

  72. Ryan

    on August 27, 2007 at 7:57 am

    Bullshit you liar. Hehehehe!

  73. BlogcuBlogu.com » CSS ile Lightbox Yapımı

    on August 27, 2007 at 12:54 pm

    [...] Lightbox’ı ister sitesindeki haliyle kullanabilir, ister WordPress için eklenti haline getirilmiÅŸ ÅŸeklini kullabilir veya ÅŸurada anlatılmış css versiyonunundan yararlanabilirsiniz. [...]

  74. links for 2007-08-28 « Simply… A User

    on August 28, 2007 at 2:35 am

    [...] Create a Lightbox effect only with CSS – no javascript needed at Emanuele Feronato (tags: css lightbox webdesign design html tutorial web howto **) [...]

  75. Web Design Resource List v3.0 |

    on August 28, 2007 at 5:29 am

    [...] Create a lightbox effect with CSS – I’m not sure how this works, I haven’t had the time to try it yet. I challange you to make this work and show me an example before I get the time to get it working. [...]

  76. scancode

    on August 28, 2007 at 6:21 am

    I really liked Andreas Blixt’s ligthbox… 0 javascript… yours is cool too, but the I thought NO JAVASCRIPT NEEDED meant NO JAVASCRIPT NEEDED. Good job anyway, you got your cookie!

  77. charles

    on August 28, 2007 at 7:53 pm

    I don’t know if anyone else mentioned this, but when I cross browser tested the code, there is a white strip on the right hand side of the browser in IE6 for PC. It is an easy fix though, just change the body tag to:

    …then it works fine in IE7, IE6, Firefox and Safari!

    I also noticed some issues with centering/scrolling in some browsers, a minor problem, however It may be worth checking out!

    Thanks for contributing your efforts, Ignore all the negativity, keep hacking away at the problems (and please change the slightly-misleading title)

    Good work….
    Thanks

    -Charles

  78. charles

    on August 28, 2007 at 10:38 pm

    Ah…

    I just noticed no one can see thee code I included, I forgot about the “html injection prevention” most sites have, anyway just add a margin of 0 to the left, right, top and bottom for the body tag…

    -Charles

  79. Josemi

    on August 28, 2007 at 10:51 pm

    Thanks, it works!!! i’m going to use in many sites!!!!

  80. Steve

    on August 29, 2007 at 2:45 pm

    very nice, still needs javascript but nice and light and does the job. Good post

  81. Webmaster-Fans

    on August 31, 2007 at 2:08 pm

    [...] Lightbox’ı ister sitesindeki haliyle kullanabilir, ister WordPress için eklenti haline getirilmiş şeklini kullabilir veya şurada anlatılmış css versiyonunundan yararlanabilirsiniz. [...]

  82. Tippi

    on August 31, 2007 at 3:22 pm

    This is nice, i tried to write something like this without the scale and fade-in effect but got the the problem to cover the whole screen with the 80% layer. However you seem to have it worked out and very lightweight to, this for sure will come in handy since im sick of the fade in stuff that takes 2-3 seconds per image to scale and fade and AHHHH!

    Thanks :D

  83. Tony Cai

    on September 1, 2007 at 10:30 am

    Hi,

    Awesome work, for those of you who wants to see it working in a real functioning website. See mine! It has made my site that much more pretty on the eyes!

    URL: http://www.sbuguide.com/
    CLICK ON THE CONTENT BUTTON.

    If you make the boarders and padding smaller, the box looks more centered. I have mine at 5px.

    Tony Cai
    http://tonycai.com

  84. Weblog » Some links

    on September 3, 2007 at 5:48 pm

    [...] Very useful post of Emanuele Feronato: Create a Lightbox effect only with CSS – no javascript needed [...]

  85. tech.twomadgeeks.com » Create A Lightbox Effect With CSS

    on September 8, 2007 at 11:29 am

    [...] Link: Emanuele Feronato [...]

  86. c grigore

    on September 10, 2007 at 1:50 pm

    check here
    http://tanny.ica.com/ICA/TKO/test.nsf/suckerfish/examplefix3.htm

    it seems that the selectbox is hidden.

  87. Andrés

    on September 12, 2007 at 3:30 pm

    Great! That’s what I was looking for!

  88. Boozox » Imaset: edtor de imágenes para Wordpress (Beta1)

    on September 17, 2007 at 5:09 am

    [...] me hice valer, sobre todo, de este material: http://php.net/ http://codex.wordpress.org/ (AJAX) http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need… [...]

  89. Dan

    on September 21, 2007 at 10:16 pm

    Give the guy a break! So maybe it isn’t 100% perfect for every single browser and its not 100% js free, but it is only 2 LINES!! Compared to many other solutions, this is f**k to achieve a nice effect that has many applications. If you need more functionality or cross compatibility then use another solution.

    People should appreciate the fact that guys like Emanuele are prepared to actually share their experiences with people.

  90. MAKE SITES .CC : SWFbox V1.0

    on September 22, 2007 at 11:41 am

    [...] on the work done here I created a flash lightbox for the Dreamway website. I needed a lightbox to present flash files [...]

  91. Makis

    on September 22, 2007 at 2:24 pm

    Hi guys,

    Based on your work I created a lightbox to load a flash file. I call is SWFbox – you can find it here:
    http://www.makesites.cc/programming/by-makis/swfbox/

    If you can make further improvements on it please be my guest.

  92. yook

    on September 23, 2007 at 1:14 am

    Looks like all the Javascript does is turn the display: none into display:block for both divs. You could easily do this with PHP instead of javascript. What I did was just keep display: block in both classes and when I want the lightbox, just dynamically include the divs on the page with PHP.

    Or if you really want just a 100% CSS solution.. you could just link to static pages with the lightbox divs coded in. Doubt people would even notice.

  93. Rafael Vale

    on September 25, 2007 at 11:27 pm

    Thanks a lot bro! Congrats, its really clean and better than lightbox.

  94. Revathy

    on September 29, 2007 at 11:49 am

    Superb….Very Useful too…

  95. Dale Hay

    on October 1, 2007 at 12:56 am

    I agree, a bit miss leading on the title considering I see a bit of Javascript. :p

  96. Screw Javascript - Use CSS to create a lightbox effect « Design News

    on October 3, 2007 at 12:50 pm

    [...] read more | digg story [...]

  97. The Scott Report

    on October 6, 2007 at 1:30 am

    [...] Lightbox with just CSS Expect to see this at TSR in some fashion soon. [...]

  98. Aaron

    on October 11, 2007 at 7:19 pm

    I’m mexican, and I would like to thank you for the guide to make the efect, I’ve been searching an other like this but in your site is that I need for my page. Excellent!!!
    If you have a pdf tutorial or something like that, where I can learn the css language could you send me by mail please??

    Thank’s a lot, very nice!!!
    Sorry for my English it’s not very well

  99. Screw Javascript - Use CSS to create a lightbox effect | yoZi

    on October 19, 2007 at 9:55 am

    [...] is an effect that fades the pagein the background to show you new content in the foreground.read more | digg [...]

  100. alonon[at]alonon[nokta]net » Blog Archive » CSS ile Lightbox Yapımı

    on October 21, 2007 at 11:04 pm

    [...] haliyle kullanabilir, ister WordPress için eklenti haline getirilmiş şeklini kullabilir veya şurada anlatılmış css versiyonunundan [...]

  101. Chad Wagner

    on November 10, 2007 at 12:17 am

    I just implemented this and loaded some content via a prototype ajax request, and it functioned perfectly!!!

    Thanks, I have never found such a simple lightbox, and this is it!

  102. RFarce

    on November 15, 2007 at 11:09 pm

    Implemented and lovin’ it. The title “no javascript required is spot on”. It didnt require me to code any javascript at all…..copy and paste. Alot easier than those other libraries which need to be configured.

  103. foysal

    on November 18, 2007 at 5:21 am

    Thank you very much.

  104. Cobolian » LightBoxJS, Ajax and co

    on November 21, 2007 at 12:38 pm

    [...] plus ou moins riches en fonctionnalités : LightWindow Greybox Lightbox effect without Lightbox Lightbox FX en CSS (et un poil de js) Modalbox Thickbox 33 plugins à base de MooTools (très intéressant) et bien sur l’excellent [...]

  105. Tim Connor

    on December 1, 2007 at 8:32 pm

    WORST, LEAST degradeable JAVASCRIPT lightbox I have seen in quite a while. If you are going to go that ugly inline approach, at least keep the href pointing to the image and add an a return false to the end of the onclick. And you are adding the same kilobytes, just manually to your html, where it can’t be cached just once in a js file.

    And the title is false, a blatant lie and misleading. It’s fine for those of us who know better, but for the noviates it’s aimed at…. Basically this is bad google baiting/trolling. I assume the author knows this too, based on the good google results for “css no javascript” posts get and the out going links to a commercial site.

  106. Joyweb /// Microidc.com » Blog Archive » 纯CSS Lightbox效果(无需JS)

    on December 6, 2007 at 4:44 am

    [...] 英文原文地址:http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need… (No Ratings Yet)  Loading [...]

  107. lunakizz

    on December 7, 2007 at 6:58 pm

    thx a lot!! It’s really useful

  108. Alan

    on December 9, 2007 at 1:51 pm

    Hi to everybody!
    I just want to say that I did an adaptation to call lightbox v2 from flash movies, if you want to check it go to:flash lightbox v2
    Good work!
    Alan

  109. Lord XeöN

    on December 12, 2007 at 9:13 pm

    Hi, every body :-)

    Thanks a lot for that nice solution : very simple and efficient :))

    So long…

  110. Michael

    on January 3, 2008 at 8:12 am

    This is just what I was looking for THANK YOU for making it available to the public!!

    Michael

  111. Palani Samy

    on January 4, 2008 at 3:58 pm

    Thank you very much for this script. I have been searching for this script about 5 hours. Finally i got a right script over here.

  112. parsi

    on January 5, 2008 at 10:09 pm

    I tried your lightbox, but it sits under my flash header… that means the flesh header is covering up the box. I think this have something to do with z-index in css but as I can see it is set up on 1001, so I guess there is no point of putting higher number. :) Does anybody have similar problem or solution for this?

  113. gagle

    on January 21, 2008 at 6:16 am

    >parsi

    Add to FLASH param:

  114. css webdev

    on January 24, 2008 at 3:29 pm

    Hello,

    very cute little thingy, will try to replace those javascript intensive lightboxes.

    Nice work!

  115. Brian

    on February 1, 2008 at 1:18 pm

    You guys are so outa ir – This guy makes up sum thing which u can use FREE. Dont dis him and dont compain. he is not chargin u to view it. And plus the concept can be easily improved.

    Think a bit

  116. justin

    on February 3, 2008 at 7:33 am

    wow you guys bitch alot… why even bother posting anything if you guys are so damn quick to jump down the dude’s throat.

  117. silencio

    on February 3, 2008 at 2:08 pm

    @Brian, well, except he’s trying to improve on what were improvements on this original idea he apparently considers too bloated and on top of that feels the need to exaggerate a claim that is not true. e.g. Slimbox plus dependencies (mootools) weigh in at a lovely 26kb, is feature filled, not as glitchy, definitely gives off the polished look, and degrades nicely. Uses mootools, but will it kill you to use a javascript framework that (for slimbox) weighs in at 19kb? Also, what’s with the big concern over size..after all, one of the more popular uses of this particular technique is for displaying..oh, images. I highly doubt those images would weigh in at under 26kb, so if it makes so much of a deal to your end users who are all on dialup or something (i mean, look, you might even save some bandwidth in the long run as they get cached)…

    I think most of the grumbling is coming from the crowd expecting 0% javascript and seeing inline javascript only after beginning to read this post, and not even a good example of what the author was trying to illustrate. It was a waste of time, that’s why everyone’s complaining. :)

    Also I might point out that pretty much all of the Lightboxes out there are also “free”, and that the author comes out pretty strongly against pretty much all of them on the basis of being bloated/unnecessary/using frameworks..you know, also known as complaining. Soooooo…

  118. Tom-cat

    on February 4, 2008 at 3:07 am

    The script is cool and pretty simple. I was just wondering how or if I could implement that same code in the following example:

    I want the page 5list.htm to be the white content
    on page load. I dont want someone to have to click on it.

    Like if I go to http://www.ww90990.com as soon as the
    page comes up, I want the white content to load with the black overlay.

    Can you tell me what code I would use instead of onclick. The exact code, if you will. Because I am using onload, but it is just not working right.

    Any help and assistance would be great.

    Thanks

  119. solitario

    on February 10, 2008 at 8:41 am

    I think this is great. I’ve been looking for a barebones lightbox script that i can customize. thanks.

  120. Digg Sucks

    on February 10, 2008 at 8:42 am

    Anyone else think that Digg traffic is inherently useless?

  121. uttam

    on February 23, 2008 at 3:54 pm

    Thanks…..
    It working fine in mozila but in IE i am facing problem.

    There is another divs in my page. it dosen’t get overlap.

  122. Ricardo

    on February 28, 2008 at 12:08 am

    Great!!!!

    simple and efective

  123. R i C H a r D

    on February 28, 2008 at 5:51 pm

    great it works

  124. My site, how does it look - Page 3 - Surpass Web Hosting Forums

    on March 11, 2008 at 2:17 am

    [...] Originally Posted by William Thanks, does look nice and interesting, but I plan to do everything myself. Then this may be of interest: Create a Lightbox effect only with CSS – no javascript needed : Emanuele Feronato – italian geek and… [...]

  125. Josh

    on March 15, 2008 at 10:54 pm

    Just curious, how would to go about making the blacked out layer 100% of the webpage, instead of just the size of the screen? i used this on a page that was longer and if you scroll down the black div just ends..

  126. rep

    on March 16, 2008 at 8:52 am

    You answer to parsi was cut off. What was you solution to the Flash problem parsi hand?

    Thanks in advance.

    >>> I tried your lightbox, but it sits under my flash header… that
    >>>means the flesh header is covering up the box. I think this have
    >>>something to do with z-index in css but as I can see it is set up
    >>>on 1001, so I guess there is no point of putting higher number. :)
    >>> Does anybody have similar problem or solution for this?
    >>>
    >>>gagle | Jan 21, 2008 | Reply
    >>>
    >>>>parsi
    >>>
    >>>Add to FLASH param:

  127. dewaji

    on March 22, 2008 at 5:46 pm

    Very nice tips. And theres no mootools or something heavy. I like this much. Thanks

  128. lol

    on March 22, 2008 at 8:08 pm

    cuz i digg it

  129. Izzy

    on March 23, 2008 at 7:22 pm

    it would be much better if the position of both the black_overlay and the white_content was set to “fixed” instead of “absolute”. This means that you don’t get Josh’s problem where the black overlay runs out if you scroll down.

    If you leave the white_content’s position attribute as absolute, you can make the shade stay there, but the white_content stay where it is and scroll off the screen.

    Hope this helps someone!

    Izzy

  130. cevherler[at]cevherler[nokta]net » Blog Archives » CSS ile Lightbox Yapımı

    on March 23, 2008 at 9:13 pm

    [...] haliyle kullanabilir, ister WordPress için eklenti haline getirilmiş şeklini kullabilir veya şurada anlatılmış css versiyonunundan [...]

  131. Scott Elliott

    on April 4, 2008 at 8:25 am

    The problem here is that if you use the javascript the end users can get a warning that turns them away from the site. No means No not oooooh a little bit’s OK.

    Nice effect bad title

  132. lupu.slobodu

    on April 4, 2008 at 10:44 pm

    superior work, elegant, the best out there man

  133. nealc

    on April 11, 2008 at 4:18 am

    Hey, I tried the lightbox on a new site design, but I can’t get it to work where there is more than one image being clicked, with a different image per thumbnail–they all share the same pic. How can I make it so I have multiple images (like 14 or more) on a page, with different respective counterpart images in the lightbox?

  134. ちょっと便利なCSS Tips いろいろ | DesignWalker

    on April 11, 2008 at 8:20 am

    [...] 11. Create a Lightbox effect only with CSS – no javascript needed [...]

  135. ronnie

    on April 15, 2008 at 9:15 pm

    Give the man a break. Who cares if their is some JS. Its a great alternative.

  136. Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker

    on April 16, 2008 at 8:07 am

    [...] Create a Lightbox effect only with CSS – no javascript needed [...]

  137. Effets en Css pur et Conseils ( sans javascript )

    on April 25, 2008 at 11:44 pm

    [...] Create a Lightbox effect only with CSS – no javascript needed [...]

  138. Pure CSS Effects and Tips (Does not use JavaScript) | DESIGNwalker max

    on April 30, 2008 at 7:47 am

    [...] Create a Lightbox effect only with CSS – no javascript needed [...]

  139. wheres me jumpa

    on May 5, 2008 at 5:56 pm

    mmmm title is misleading, however it was just what I am after. Tip of the cap kind shrew.

  140. Snark

    on May 6, 2008 at 11:23 pm

    Thanx for this very best ModalBox on Planet!!! Work perfect on Windows XP/2000 with

    IE 5.01(!), IE 5.5, IE 6, IE 7, Opera 7,8,9, Safari, Firefox, Netscape Navigator

    Only old browser can not realize the opacy filter function, but the box have correct porsition and size with a black background! Perfect!

    Namastey
    Snark

  141. Snark

    on May 6, 2008 at 11:28 pm

    Activate opacy on Linux systems with Konquerer

    Add on CSS:

    -khtml-opacity:0.7;

  142. Mustafa TürksavaÅŸ » Blog ArÅŸivi » Derleme #2

    on May 11, 2008 at 1:55 am

    [...] bir blog uygulaması # Css kullanılarak lightbox efekti oluÅŸturmak üzerine güzel bir yazı # Burcu DoÄŸan‘dan jQuery üzerine çok güzel bir videolu anlatım # Grafik kullanmadan css [...]

  143. Ab

    on May 15, 2008 at 6:27 am

    What a bullshit article. I guess the author does not understand what “percent” means.

    This is not 0% javascript.

  144. elf boy

    on May 17, 2008 at 4:50 am

    So I put a video in the box, and that works fine, except for when I close it. After I close it, the sound continues to play. Any help?

  145. steve

    on May 19, 2008 at 1:47 pm

    yeah I think we have now clarified that it does use a ‘tiny’ bit of javascript but whatever…

    …can someone help me out on how to make this work if the page scrolls??? clint mentioned something about using ‘fixed’ display…any comments welcomed!! At the moment it would appear to only fill the screen dimensions anything else does not get covered by the black box???

  146. Eqqy Designs | Vancouver

    on May 21, 2008 at 9:14 pm

    Nice little script you got there. Sure it needs some javascript, but hey, this is still an alternative form of lightbox.

    Thanks for sharing!

  147. jai

    on May 27, 2008 at 11:58 am

    maybe it doesn’t even matter if there is javascript or not! just a line or two it still works doesn’t it? all you who don’t appreciate how amazing this is for me! i think i’ll put this on my website its so amazing!

  148. jai

    on May 28, 2008 at 8:30 am

    Does this work for multiple Lightboxes? (not at the same time, just different links on a page to open a lightbox with different content)

  149. alastor

    on May 29, 2008 at 7:37 pm

    @Tom Howard:
    BIG donut for you!!!

    if your PoC could degrade in IE to thumbs that point to larger versions opening another window it would be perfect, and is what we should do from now on, design for sane browsers and degrade to IE (in a ugly way! consistent with an ugly browser).

  150. AnonaMe

    on May 29, 2008 at 9:44 pm

    Sorry if this has been addressed already…i didn’t feel like reading the thousand comments that complain about the F’ing title.

    Forms with select options underneath the lightbox show through in IE. Firefox works great for what i’m trying to accomplish…any idea’s on addressing the select in IE tho?

  151. AnonaMe

    on May 29, 2008 at 9:49 pm

    yes it does…just give them different id’s ex.
    #
    This is the lightbox content. Close
    #

    #
    This is the lightbox content. Close
    #

  152. weilin

    on May 30, 2008 at 4:15 am

    Wow cool!

  153. Marcelo

    on June 1, 2008 at 2:26 am

    Exactly I was searching for my login page! People sometimes forget to keep things just simple.

  154. Gus

    on June 13, 2008 at 3:42 pm

    greta, the css is not valid :/ ….

  155. Kirsten

    on June 26, 2008 at 8:36 pm

    Man, people are such whiners!

    As someone who was asked to implement a simple lightbox for her organization’s site, and isn’t very comfortable with JavaScript, I’m very grateful that you created this and shared it with the world. The amount of JavaScript that there is or isn’t in what you published is perfectly fine with me. The JavaScript required for a “real” lightbox is over my head, but I think I’d be able to implement this. Thanks!

  156. John Masone

    on July 1, 2008 at 12:20 am

    I got this code working pretty easily with an iframe instead of a div. BUT the last issue I seem to be having is, the “lightbox” is always the size of the browser window, but its always at the top of the page, even if the page is scrolled somewhat when the initial link is clicked. Is there someway to change this behavior? So that the lightbox (and blackout) are always centered on the browser, at least the browser as it is when you click. ?

  157. Peter

    on July 1, 2008 at 4:01 am

    Suggest if you use position: fixed in both classes the lighbox and overlay will remain stationary when scrolling the page.
    Unfortunately this only works in IE7 when using Strict DTD

  158. Muhammad Tariq

    on July 3, 2008 at 6:45 am

    Nice Tutorial i am very happy. Thanks

  159. Kiran

    on July 7, 2008 at 11:23 pm

    I have some select boxed and frames in my pages and the light box doesnt work as it should.

  160. Kiran

    on July 7, 2008 at 11:24 pm

    I forgot to add. Try in IE with a select box in the main content.

  161. Tamesh

    on July 9, 2008 at 8:34 am

    Its very cool but it doesn’t support DDT doctype,
    how is it possible.

  162. Tamesh

    on July 9, 2008 at 8:57 am

    i have an issue, when the browser content is bigger then the black background has not covered the whole screen of the browser.

    anyone plz solve this issue.

  163. Best Solution for Web :: Create a Lightbox effect only with CSS - no javascript needed :: July :: 2008

    on July 12, 2008 at 9:25 am

    [...] Ref. emanueleferonato.com [...]

  164. Matevž Na Spletu » Blog Archive » Lahek Lightbox

    on July 29, 2008 at 2:00 am

    [...] Pri trenutnem projektu sem potreboval navaden lightbox efekt. Naletel sem na članek na sledeči strani, ki je super zadostil mojim osnovim potrebam: http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need… [...]

  165. Stasan

    on July 31, 2008 at 1:41 pm

    It’s great. Sorry for me grammar. I’am from belarus. May I translate this lesson to Russian. And publish it in web. It’s often need, but no so good tutorials on Russian language. Of course I will write that real author Emanuele Ferontano and I only translator, and publish link for this page.

  166. Emanuele Feronato

    on July 31, 2008 at 2:33 pm

    Sure, stasan!

  167. Stasan

    on July 31, 2008 at 2:58 pm

    Thank You!!!

  168. Matthew

    on August 1, 2008 at 6:49 am

    Excellent, excellent work! I love the lightbox concept, but each version I’ve looked at so far (GreyBox, LightBox, etc) has been based on some idiotic javascript framework with 1000s of lines of code. This version is just beautiful, you get the same exact effect (even better, since it doesn’t have the annoying animations) with code you could write on a napkin. Thanks guys!

  169. will

    on August 13, 2008 at 3:48 pm

    when more than one images are on the same page, when clicked on, they all load the same image in the ‘lightbox’. Is there a way around this? Great code by the way, will be even more useful if it works for multiple images on same page (about 10 images per page i need for portfolio example)
    Regards

    Will

  170. will

    on August 13, 2008 at 5:42 pm

    ah solved it now – novice error just had to id each image differently. Looks fantastic thanks once again.

  171. Sonneries mobile | Buzzado

    on August 15, 2008 at 2:59 pm

    Wow ! I really love this alternative.

    (No matter the title……. it helps me to find your article on search engine !) ;)

    Thanks. Lea.

  172. John Fonseka

    on August 23, 2008 at 11:04 am

    The title “No Java script needed” is misleading. but the work he did is greate coz java involved here slightly. Otherwise we also must be know that without java, only css cannot do this!!!

  173. Crear el efecto de lightbox solo con CSS | Web Grafi 2.0

    on August 24, 2008 at 7:10 am

    [...] Via:Emanueleferonato [...]

  174. Farmer

    on August 31, 2008 at 6:31 pm

    Despite being slightly misleading, there is no need to set-up js frameworks, and so this is a brill solution for implementing lightbox-type effects in iframes (for iWeb and the likes).

    Granted, it’s a basic solution, but as far as I can work out, its the only way to implement such effects without calling up external scripts.

    Been trying to implement it into a site I’m working on in iWeb…
    http://www.webmywedding.co.uk/products.html

    Go easy – I’m only a hobbyist, and the site is still in development!

  175. web design egypt

    on September 18, 2008 at 10:58 am

    nice script! i will try it in my next project

  176. Linuxjetty

    on September 19, 2008 at 8:22 pm

    Hi,

    Thank you for nice work and not adding libraries or junks that’s why I preferred your code out of all lightbox 2, 1, jquery lightbox, prototype.js etc etc.

    issue # 1)
    height in percentage doesn’t work when page height is longer.
    Solution: Define exact height of page in pixel solved that problem.

    issue # 2)
    with flash it doesn’t work normal especially vertical and horizontal alignment.
    solution: add table with one cel across popup div only and define exact height and width, well running out of time honestly i already have tried 7 light box from web sites all were junk your one found best will paste whole code someday later.
    issue # 3)
    I could not solve yet is: if ucrrent browser window is half or full or increasing or decreasing height wise this div should float vertically center/middle.

  177. Efecto Lightbox en Bligoo con CSS

    on September 28, 2008 at 11:01 pm

    [...] guia (no pude escribirlo directamente ya que se descomponia el codigo) claro basado en la del autor del efecto. visto en [...]

  178. Iain Wood

    on October 6, 2008 at 9:49 pm

    Really Useful

    FYI changing the position property from absolute to fixed solved the scrolling problems as far as im aware!

    nice will use this a lot!

  179. usedit

    on October 15, 2008 at 2:44 pm

    js or not js, it works where I needed it. Thanks.
    Please add: height:4000px; in a conditional IE <=6 statement for the background div, the 100% won’t work on IE6.

  180. usedit

    on October 17, 2008 at 11:04 am

    js or not js, it doesn’t works where I needed it. Thanks.
    Please add: height:4000px; in a conditional IE <=6 statement for the background div, the 100% won’t work on IE6.

  181. Efecto Lightbox con CSS » unijimpe

    on October 23, 2008 at 8:17 am

    [...] t̩cnica fue originalmente explicada en Create a Lightbox effect only with CSS Рno javascript needed en donde se explica que este efecto de mostrar un div que sobreponga todo el html, se puede [...]

  182. Crear el efecto de lightbox solo con CSS - Monjes - Cultura libre

    on October 28, 2008 at 4:40 pm

    [...] Crear el efecto de lightbox solo con CSS Navegando me encuentro con este tutorial, interesante para aquellos que no deseen utilizar javascript para crear el efecto de Ligthbox, pueden usar esta técnica utilizando únicamente CSS. DESCARGAR [...]

  183. Crear el efecto de lightbox solo con CSS - Servidores / Webmasters

    on November 7, 2008 at 8:21 pm

    [...] javascript para crear el efecto de Ligthbox, pueden usar esta técnica utilizando únicamente CSS. DESCARGAR Visiten mis aportes [...]

  184. Efecto de lightbox solo con CSS

    on November 7, 2008 at 9:00 pm

    [...l efecto de Ligthbox, pueden usar esta técnica utilizando únicamente CSS...]

  185. sanju

    on November 9, 2008 at 11:46 am

    Very helpful one

  186. ropo

    on November 18, 2008 at 3:44 pm

    position: fixed does not work for me because my HTML is not strict and I cannot change it. I will try setting body {overflow: hidden;} now …

  187. ropo

    on November 19, 2008 at 3:51 pm

    ok. setting overflow hidden on the body worked for me. also I needed to scroll to the top with scroll(0,0). now it looks good

  188. ดึงข้อมูลด้วย gridview แล้วคลิกลิงค์ เปิด popup พร้อมแสดงข้อมูล (popup ไม่ใช้ window.open แต่ใช้ CSS) « ช่วงนี้บ้า

    on November 26, 2008 at 7:42 pm

    [...] http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need… [...]

  189. riri

    on November 28, 2008 at 12:12 pm

    thanks to share this, very helpful!

  190. mobilya

    on December 13, 2008 at 12:27 pm

    Very nice Lightbox Content tutorial..

  191. alex

    on December 14, 2008 at 8:05 pm

    there is no javascript needed.. the point of the title was to say that to have the lightbox positioned properly on the screen there is no javascript needed to detect browsers, or position divs or whatever, such as the jquery thickbox library.

    of course you need javascript to control the opening and closing of the lightbox, anyone who opened this article thinking as much should give up web development LOL

  192. Manny

    on January 12, 2009 at 9:30 pm

    how to disable page shadowing effect, just show only popup image? (css popup)

  193. Sumit

    on January 19, 2009 at 5:30 pm

    Thanks a lot. Now, I have learn how to create a Lightbox.

  194. Live Frame

    on January 20, 2009 at 5:25 pm

    Not pure css, but good work. I use
    Visual LightBox, VisualLightBox.com to setup
    Lightbox script and thumbnails. Will your implementation work with VisualLightBox?

  195. TylerDurden

    on January 21, 2009 at 6:09 am

    I wonder how many idiots are out there with no money and no brain to do their own effects.

  196. Mark SKayff

    on January 24, 2009 at 8:50 am

    Hi Emanuel. Thanks for your Technique. It’s very good. It was really helpfull.

    I want to enphasise the positive aspect, that is all. Of course, it uses a little inline Javascript to manipulate the DOM. Othewise, nothing would happen.
    Well, best for you! And wait you feature a new one in the future with some more javascript ammount there…

  197. Joaquín Núñez» Blog Archive » The Lightbox Clones Matrix

    on January 27, 2009 at 4:22 pm

    [...] Bastante cómoda si no encuentras un lightbox que se acomode a tus necesidades….. de seguro que aquí encuentras lo que necesitas. Yo aún no doy con lo que necesito así que me haré un mega-super-ultra-liviano lightbox con este css. [...]

  198. certwert

    on February 14, 2009 at 5:08 am

    Absolute lifesaver. Thank you so much.

  199. Claus

    on February 19, 2009 at 3:37 pm

    It seems that if you have a long page and you’ve scrolled down and then launces the layer – it’s only visible at the top of the page? Then you have to scroll back up?

    How to get around that?

  200. kidd

    on February 20, 2009 at 7:31 am

    coool.. no need of an external js

  201. nebulae

    on February 26, 2009 at 7:33 am

    loves it. Super lightweight, that’s exactly what I’m looking for. no scriptalicious or mootools or jquery or prototype required; seriously, 300k + for a nice looking modal is overkill. this is perfect, thanks! I can easily modify the concept to fit my needs exactly.

  202. ramesh

    on March 10, 2009 at 1:41 pm

    hi, its great. but all the problem is with IE 6.0. The lightbox effect does not working fine if there are SELECT boxes. Try that.

  203. TreeHouse » HDS網站改造計畫

    on March 18, 2009 at 4:54 am

    [...] | Google Search Engine Ranking FactorsCSS(網站) CSS語法教學(網站) Moving Boxes(網站) Create a Lightbox effect only with CSS(網站) CSS | Smashing [...]

  204. Andy

    on March 20, 2009 at 7:29 am

    Hey, this is a nice example, but if I have a Flash (.swf file) in my web page the light box just goes below the Flash file, I tried to overcome this by using Z-index , but its not working , let me know if anybody has a reslove/fix for this ..
    Cheers .. .

  205. Discover the “Cool” of CSS: 25 Advanced CSS Techniques | Desizn Tech

    on March 25, 2009 at 5:46 pm

    [...] is another useful  technique that is using CSS and a little Javascript to create the lightbox [...]

  206. Stas

    on April 2, 2009 at 8:52 am

    Andy, try add to swf function this param

    or

  207. senthil

    on April 3, 2009 at 1:14 pm

    Nice ariticle

    I tested cross browser the code, there is a white strip on the right hand side of the browser in IE6
    remains are IE7, IE6, Firefox and Safari works fine how to solve this one.

  208. 克兰印象 » 25个高级CSS技巧教程

    on April 8, 2009 at 3:07 am

    [...] technique [...]

  209. Jordan Dobson

    on April 19, 2009 at 1:26 am

    Those of you that are having problems with flash need to add a “wmode” to your flash embed code. Adding something like this property should work and then allow you to z-index the position.

    wmode=”opaque”

    Without it your flash will always be on top of everything else. That’s the default.

  210. CodeMonkey

    on April 22, 2009 at 1:48 am

    I can’t believe peeps here are giving the author grief about whether or not this contains javascript. As far as I’m concerned, it doesn’t. A couple DOM calls versus all those bloated 100k+ .js files out there you’d have to add is NO comparison. Oooooh, and if the browser can’t handle javascript, it won’t work.

    Can’t write a check yourself? Jeez.

    Well done sir. This is exactly what I’m looking for!

  211. 神奇的CSS-25个样本迷死你 | 鹏博客

    on April 23, 2009 at 5:34 am

    [...] technique [...]

  212. Matt

    on April 24, 2009 at 8:35 pm

    Ok..you claim you have no JavaScript fine..you do whatever, however then you go on to say your using AJAX…which is “Asynchronous ..here it is…JAVASCRIPT and XML” learn your terminology retard.

    you destroyed your own argument of no javascript..good job.

  213. CarLam

    on April 26, 2009 at 11:52 pm

    I’m a student designing my first websites and I really wanted to integrate a lightbox into my pages. Your script is simple and easy to manipulate. Thank you for sharing your gift!

  214. Tagz | "Create a Lightbox effect only with CSS - no javascript needed at Emanuele Feronato" | Comments

    on May 16, 2009 at 6:54 pm

    [...] [upmod] [downmod] Create a Lightbox effect only with CSS – no javascript needed at Emanuele Feronato (www.emanueleferonato.com) 2 points posted 1 year, 8 months ago by SixSixSix tags css imported [...]

  215. Keith D

    on May 23, 2009 at 3:23 pm

    Great little tut

    I’m always wondering if I should use javascrpt or not.

    This might be the solution to achieving the same effect.

  216. sarah

    on May 26, 2009 at 9:12 pm

    i’m trying to make this work for my website but can’t really quite get there. i already have my links set up and just want the lightbox to work iwth them. instead of against them. its just not working out.
    my current link tag is this



    _______ where i’d want each “box” class be a link to a lightbox. how exactly do i intergrate this. HELP! plzzzz i would really appreciate it.

  217. sarah

    on May 26, 2009 at 9:14 pm

    ooook… i duno why it didnt’ show up.

    its a div inside a few divs. i just dont’ know where to put this new div to make it work.

  218. John Doe

    on June 1, 2009 at 6:11 am

    Why is everyone complaining about this script using “javascript:void(0)”

    If you do not want this javascript statement in the page, you can replace it with “#” and it will still work PERFECTLY fine without
    “javascript:voice(0)”

    And as someone previously stated, onclick=”" is a DOM event.

    I personally use this script and I have no problems with Firefox and IE7 or IE8 using “#” as the link target destination.

  219. Richard

    on June 2, 2009 at 5:29 pm

    works fine, thanks !

  220. Jay

    on June 6, 2009 at 12:05 am

    Many thanks for this brilliant lightweight Lightbox – works great so far as i’m just displaying text…will try images and flash at some point.

    FOR those of you having PROBLEMS with:

    (1) Black overlay not covering the entire screen when on scroll/large pages

    AND

    (2) White box not being centered on scroll/large pages

    SOLUTION:
    set css black_overlay & white_content position: fixed; rather than position: absolute;

  221. Jay

    on June 8, 2009 at 7:18 pm

    @SARAH, number 158

    Sarah the lightbox shows in the ‘white content’ everything within div id=’light’ and the relating javascript code, document.getElementById(‘light’).

    Therefore if you want different things to show up in the lightbox then you will have to give them a different ID, e.g. div id=’light2 & document.getElementById(‘light2′), div id=’light3 & document.getElementById(‘light3′) and so on.

    I’m sure someone here can do something with functions to simplify this? – here i have two examples, calling FADE as it is constant for the opacity effect:

    **JS**


    function showLightbox()
    {
    document.getElementById(‘light1′).style.display=’block’;
    document.getElementById(‘fade’).style.display=’block’;
    }

    function closeLightbox()
    {
    document.getElementById(‘light1′).style.display=’none’;
    document.getElementById(‘fade’).style.display=’none’;
    }
    function showFade()
    {
    document.getElementById(‘fade’).style.display=’block’;
    }
    function clearFade()
    {
    document.getElementById(‘fade’).style.display=’none’;
    }

    **HTML**
    Link 1

        

    hope that helps.

  222. Jay

    on June 8, 2009 at 7:21 pm

    sry html code doesn’t fully show…

    **HTML**
    a href=”javascript:void(0)” onclick = “showLightbox()”>Link 1

    input type=”button” name=”NoDontAgree” value=”No, I Disagree” width=”20″ onclick=”closeLightbox()”

    /div
    ///lightbox end

  223. Honey

    on June 11, 2009 at 9:08 am

    Thank you very much…

    Few people wrote that the Title is a mistake becuase its not only CSS..

    but..I came here becuase I read it!..
    and It’s working perfect!..

    Be grateful..all the time!..This person is shareing with us. (oh too confortable find all the info easy!without mistakes..Its not ok!…Try to do the best too!)
    :)

    Im very graeatful!..

  224. 10 astonishing CSS hacks and techniques

    on June 16, 2009 at 3:59 pm

    [...] Source: Lightbox effect in pure CSS: No javascript needed! [...]

  225. Rob

    on June 16, 2009 at 6:34 pm

    100% that’s javascript.

  226. stk

    on June 18, 2009 at 3:58 am

    Fails if javascript is off. Not only does it fail, but it doesn’t even degrade.

    “No JavaScript Needed” – Bullshit.

  227. 10??????CSS hack????? « SonicHtml???- PSD?HTML / XHTML,CSS / W3C?? / ?????? / WordPress?? / Joomla??

    on June 18, 2009 at 9:42 am

    [...] ???Lightbox effect in pure CSS: No javascript needed! [...]

  228. Samia

    on June 18, 2009 at 6:38 pm

    Hey,this is a great code and quite simple for beginners like me, but it’s not working with apdivs’.Can you do something about it?It’s getting on my nerves.

  229. 10??????CSS hack???| CSS| ????

    on June 19, 2009 at 3:33 am

    [...] ??:?CSS?Lighbox??:??Javascript ? [...]

  230. Web Super Star » Blog Archive » Ajax Lightbox and Modal Dialog Solutions

    on June 19, 2009 at 10:14 am

    [...] Creating Lightbox with CSS [...]

  231. 10??????CSS hack??? | ???????...

    on June 19, 2009 at 3:11 pm

    [...] ??:?CSS?Lighbox??:??Javascript ? [...]

  232. Efecto Lightbox solo con CSS | Ayuda WordPress

    on June 22, 2009 at 12:03 am

    [...] Si te gusta el efecto Lightbox ese redimensionado de las imágenes sin salir de la página, debes saber que no es necesario usar Javascript, lo puedes conseguir solo con CSS. [...]

  233. SMB

    on June 24, 2009 at 11:57 pm

    BEAUTIFUL! It works beautifully! Just made the suggested change from “absolute” position to “fixed” to keep the content in place on large scrolling windows. Awesome! Works on Safari and Firefox for mac.

  234. SpotGeek.net » Ajax lightbox and modal dialog solutions

    on June 30, 2009 at 12:30 am

    [...] Creating Lightbox with CSS [...]

  235. toni

    on July 9, 2009 at 10:17 pm

    hi guys

    I NEED HELP, PLEASE!!!

    i’m trying to link a new image to every new thumbnail in the lightbox, every time i click on a thumbnail, the same picture appears. how can i get a new image to load up each time i click on the thumbnail.

    does someone have the code for this and could you please tell me EXACTLY where i should put that code. because i new at even using a little bit of javascript, it’s all a bit confusing for me, i need to know EXACTLY where things go, maybe some one would be nice enough to give me the whole code regarding the images, maybe this is where i am going wrong, HELP, HELP, HELP.

    by he way, this code looks really good, i just need to get the above working.

    cheers guys
    toni hearn

  236. 10??????CSS hack??? | ????-????.????.????

    on July 15, 2009 at 8:38 am

    [...] ??:?CSS?Lighbox??:??Javascript ? [...]

  237. kiran

    on July 15, 2009 at 4:44 pm

    This doesn’t work if scroll is there,what i mean to say is that white fading background is only for full screen with no scroll,if scroll comes white fading background is not completely covered

  238. seafroggie

    on July 16, 2009 at 3:52 pm

    Hello, what code I have to put to open another html page in the box? Thank u

  239. kiran

    on July 16, 2009 at 8:10 pm

    I tried changing position from absolute to fixed in both the css class ,still its not working

  240. Vor-/Nachteil Methode Bild vergrössern/einblenden - Seite 2 - php.de

    on July 20, 2009 at 11:55 pm

    [...] mfg Timo Ich würd auch auf eine Lightbox setzen, dazu brauchst du noch nicht mal Javascript. Create a Lightbox effect only with CSS – no javascript needed : Emanuele Feronato __________________ Ich kann allem widerstehen – ausser der Versuchung Oscar [...]

  241. 20 FREE Online CSS Resources to Quickly Enhance Your Website Design | Tips for Easily Creating Websites

    on July 23, 2009 at 3:34 am

    [...] 13. LightBox Effect Using CSS Only [...]

  242. Kay85

    on July 23, 2009 at 11:15 am

    Hello,

    Thanks for the script! However, I can only get one image to work. What parts of the script do I have to alter if I wanted more than one link on the page. I have created little icons and want different images to come up when they are clicked on, but the same image keeps coming up when I click on them. Please help!

    Thanks!

  243. Ennarrpee

    on August 10, 2009 at 2:03 pm

    its not working in ie 6

  244. Alan

    on August 17, 2009 at 2:19 pm

    http://www.cssplay.co.uk/menu/lightbox-click.html on Stu Nicholls’ CSS site ONLY uses CSS (but doesn’t work in SAFARI & CHROME due to the way they handle mouse clicks).

    But http://www.cssplay.co.uk/menu/lightbox-hover.html does work in those browsers (using HOVER to activate, instead of mouse clicks).

    No – I have connection with CSSPLAY – just luv what Stu does with only CSS.

    Alan

  245. 25???CSS???? | ????

    on August 18, 2009 at 12:58 am

    [...] technique [...]

  246. Murali

    on August 21, 2009 at 2:00 pm

    Hi Emanuel,

    Thanks for the lightbox. It works perfectly in
    IE 7 and above, safari and mozilla but not working properly in IE 6. Needed help regarding the same.

  247. Magmatrix

    on August 25, 2009 at 10:15 am

    Even though this is not 100% JS free, it is a very simple way to do a nice and simple lighbox when you have a very limited number of images to show.

    I changed this:
    - “position: fixed”
    - “-khtml-opacity: 0.8″
    - “text-align: center”
    and then i put a “height: 99%” on my images to make them center vertically and show at maximum size without any scrollbars.

  248. J.D.O.

    on August 29, 2009 at 2:12 am

    This is not pure CSS at all as you have Javascript changing the class. This solution is also not semantic as you have an empty div element. Perhaps you could consider using a little more Javascript and dropping the empty div into the DOM or getting even deeper, appending a div to the DOM and appening the “white” content inside, then style the content from the center so you’ve now no empty elements.

  249. Murali

    on August 29, 2009 at 12:21 pm

    Hi All,

    I found out the issue actually in my web page I was using dropdown list boxes which were been rendered from the database when I was triggering the light box on click of a link the black_overlay class and the white_content was not covering the entire web page it was not able to cover the dropdown list boxes with the defined color in IE 6 Browser.

    Due to which it was not able to display the light box properly in this browser even though it was working in all other browser’s including version >IE 6. I tried using image as background which din’t work.

    I GOT THE SOLUTION FROM ONE BLOG:

    – make the dropdown list box visibility false before the lightbox is triggered and again retain the previous state for the drop down box as visible.

    This can be made using a simple

    for retaining again make the same as

    for the drop down boxes whereever used.

    This solved my issue.

    Hope this would be of some help. So posted it.

    But No Problem with the CSS LIGHTBOX given above its working perfectly in all the browsers.

    Good Work Emanuele thank you…. :-)

  250. Murali

    on August 29, 2009 at 12:24 pm

    In addition to the above reply use the

    div’s display:none; and display:block for hiding the dropdown list box

  251. 5 innovative CSS Techniques You Should Know About « typesett - Your AMUSING Resource for Useful Design, Typography and Web Dev Articles

    on August 31, 2009 at 4:50 am

    [...] http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need… [...]

  252. phil

    on August 31, 2009 at 9:04 pm

    No javascript needed?
    I think not as it doesn’t work with firefox and safari (javascript disabled)

  253. Mateus

    on September 4, 2009 at 9:26 pm

    Thanks!

    really simple and effective alternative.

  254. Whofeih

    on September 5, 2009 at 9:44 am

    Thanks! It was a nice tutorial! Finally learned!

  255. 10 astonishing CSS hacks and techniques | huibit05.com

    on September 7, 2009 at 2:00 pm

    [...] Source: Lightbox effect in pure CSS: No javascript needed! [...]

  256. Channel updates, September 8th | The Lifestream of Robert Fransgaard

    on September 8, 2009 at 11:02 am

    [...] Shared Create a Lightbox effect only with CSS – no javascript needed : Emanuele Feronato [...]

  257. Tameshwar

    on September 10, 2009 at 12:01 pm

    Nice tutorial, but i have question, when the large amount of contents comes from the behind the popwindow then the lightbox will not cover the whole area. can this is possible with CSS. please reply me.

  258. Hay algun "lightbox" para ver videos y no img's?

    on September 13, 2009 at 9:11 pm

    [...] [...]

  259. Jason

    on September 14, 2009 at 5:24 am

    Thanks! awesome tutorial !

  260. FMaz

    on September 14, 2009 at 10:59 pm

    In case javascript is unsupported, I think the best way to implement the link is:

    Click me

    instead of:
    Click me

    I removed the javascript from the href, and placed a return false at the end of the onclick handler to halt the triggering of the link.

  261. FMaz

    on September 14, 2009 at 11:02 pm

    Oh well, the HTML code is displayed, sorry for the the previous post.

    so replace the :
    href = “javascript:void(0)”
    onclick = “document.getElementById(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block’”

    By:
    href = “#”
    onclick = “document.getElementById(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block’;return false;”

    Also, if the page is longer than the window size, the position absolute will give you a problem.

    It might be interesting to try to replace:
    position:absolute;
    by:
    position:fixed;

    Ok, I’m gone now :)

  262. Lightbox usando CSS « Blog de diseño web

    on September 16, 2009 at 11:01 pm

    [...] poco de teoría Esta técnica fue originalmente explicada en Create a Lightbox effect only with CSS – no javascript needed en donde se explica que este efecto de mostrar un div que sobreponga todo el html, se puede [...]

  263. David Balažic

    on October 5, 2009 at 1:40 pm

    If I use this in a frame, the black_overlay covers only the frame it is in, not the entire window. Is there a way to make it cover the entire window?

    Regards,
    David

  264. sandeep

    on October 9, 2009 at 12:28 am

    hi
    am using a lightbox application, which is coming in half window size, i need the light box of full window size.

    Please help me.

  265. free games

    on October 9, 2009 at 3:48 am

    Really useful!! Thanks!

    Is it possible that one day we see this example with some php/ajax code to make it more dynamic?

    Thanks again! :-)

  266. Mohamed Elmahdy

    on October 16, 2009 at 10:50 pm

    hi it was wonderful work

    thank you at all i just suggest to se how you can include some of jquery code in this code to make it more animation
    waiting for your response and i will follow this great blog

  267. Mohamed Elmahdy

    on October 17, 2009 at 12:11 am

    i think this code will make it work with more animation

    $(document).ready(function() { $(“#light”).show(“slow”); light(); });

  268. Tomas

    on November 4, 2009 at 6:40 pm

    Fussy lot aren’t you!! Its straightforward to make it degradate so quit moaning and just sort it out yourselves. He has left it like that to make it easy for everyone to get the delightfully simple technique…

  269. Thiago Monteiro

    on November 5, 2009 at 10:10 pm

    I was researching this effect on countless blogs and in my humble opinion your code was the most direct and appropriate. You really put the house in order to follow a pattern and let that part of the vision over the control with CSS and JavaScript.

    Congratulations for your great job!

  270. Discover the “Cool” of CSS: 25 Advanced CSS Techniques | Theme Center

    on November 6, 2009 at 7:52 am

    [...] is another useful  technique that is using CSS and a little Javascript to create the lightbox [...]

  271. links for 2009-11-29 « Breyten’s Dev Blog

    on November 29, 2009 at 1:03 pm

    [...] Create a Lightbox effect only with CSS ? no javascript needed : Emanuele Feronato – italian ge… (tags: javascript lightbox css) [...]

  272. Arden

    on December 4, 2009 at 12:55 am

    Nice job with the light box! It’s pretty cool!! One thing i found was, if i added a large image, i had to scroll to see it. If you get this problem, what i found you can do is change the “white_content” part of the head code to say this:


    .white_content {
    display: none;
    position: absolute;
    top: 1%;
    left: 25%;
    width: #%;
    height: #%;
    padding: 16px;
    border: 16px solid #EDF5FA;
    background-color: white;
    z-index:1002;
    overflow: auto;

    This will make the white box as big or small as it needs to be for what ever is inside it. One problem with it however, is that the black opacity behind it cuts off down the bottom, so you may need to change the line “height: 100%” (under .black_overlay), to about 120%, or until it works..

    Great script though! :D

  273. Arden

    on December 8, 2009 at 2:04 pm

    Ok, i’m getting this problem. I’m trying to make this a custom BBCode on my forums. It’s working, except some of the buttons appear over the top of the black overlay. I’ve changed the z-index to crazy numbers like 999999999, but it still did nothing. Can anyone help me please?

  274. Johannes

    on December 9, 2009 at 3:44 pm

    thanks alot for your wonderful code. It works perfectly for me.

  275. Digideal

    on December 25, 2009 at 7:33 am

    I am looking for using this lightbox method on one of my websites, i want to show the privacy, about us etc content on the light box, what would be the best way to implement that

  276. Alex

    on December 30, 2009 at 2:57 am

    The only problem (I think) is that if you click outside the highlighted box that means in the greyed area, the window doesn’t go rather you need to click the close icon. This doesn’t happen in other lightbox.

  277. Phil Oertel

    on January 3, 2010 at 2:24 am

    Thanks, cool post! I found this by googling “how does a lightbox work”, and your simple solution does a great job of explaining the essential trick – the black div with z-index and alpha properties. Thanks for posting!

  278. Anonymous

    on January 14, 2010 at 5:44 pm

    [...] [...]

  279. ATL2000

    on January 18, 2010 at 2:55 am

    Hi all,

    Glad to find a solution here without changing too much in Joomla! for example.

    But as lots of you asked, I wonder how to handle a page with lots of pictures here.

    Thanks for sharing and in advance for your help.

  280. Tommy

    on January 30, 2010 at 10:18 pm

    The script works good ! But the only thing is I want to add more then one link to the lightscript box on the same page and I tried to do it but only the first link displayed with the first content? How can I use more then one link on the same page with different content in the light box for each link?

  281. In page pop up javascripts or modalbox | wordpressapi.com

    on February 20, 2010 at 7:52 am

    [...] http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need… Share and Enjoy: [...]

  282. Abeam

    on March 2, 2010 at 1:09 am

    2 questions:

    How would the code look like if i want to click on the opened picture and close?

    How would it look like if i want to position the bigger lightbox image above and relative to the thumbnail like right corner of thumb is right corner of big picture?

    Cheers!

  283. Hoxxy

    on March 4, 2010 at 9:30 pm

    Title is very missileading last time I knew

    javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block’

    was javascript!! :(

  284. sumon

    on March 6, 2010 at 1:20 pm

    plz help me how to show multiple page using this way.i make this and show only one page bur i need to show 3 page in this way

  285. sumon

    on March 8, 2010 at 10:26 pm

    using this example can show one page but plz how to show 2 or 3 page in the same way.plz plz
    i use the code………

    LIGHTBOX EXAMPLE

    .black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
    }
    .white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
    }

    function clickform()
    {
    document.getElementById(‘light’).style.display=’block’;
    document.getElementById(‘fade’).style.display=’block’
    }
    function closeform()
    {
    document.getElementById(‘light’).style.display=’none’;
    document.getElementById(‘fade’).style.display=’none’
    }

    click here here

    Close

    i need to show gallery page and another page that will include in the div but who to select one which is opening

  286. Nitish

    on March 12, 2010 at 3:24 pm

    Gr8 work, i think you guys are fool, who are fighting for the the topic “Js included” , can any one tell me who can open the popup without using JS.

    Yes also there is a problem is that it ovarlaps the black box over only the window screen opened yet, but if we scroll it , it doesnt work for the rest screen.

    I got the Solution is that

    position:fixed;
    _position:absolute;
    top:0;
    _top:expression(eval(document.body.scrollTop));

    Use this in black_overlay , and it will work perfectly for IE too, thanks

  287. [JS] Lightbox effect collection « Lykientrung's Blog

    on March 17, 2010 at 1:42 pm

    [...] http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need… CSS [...]

  288. Lucas

    on March 23, 2010 at 4:04 am

    Give the guy a break !!! With the “No Javascript” he means, with no tons of it, nor JS library …

    Is really a good job dude thanks !!

    Though is very usefull, I must say that by itself it isn’t so much. But it leaves you explore the posibilities. I added a few jQuery fancy effects on open and close; and loaded content via an AJAX request using jQuery too, and is a beauty :-D

    Thanks again dude !!!

  289. CSS??????Tips | WebLab

    on March 29, 2010 at 11:58 am

    [...] Create a Lightbox effect only with CSS – no javascript needed [...]

  290. oman

    on April 6, 2010 at 2:09 pm

    who cares whether it is js or not..

    as long as its working, it’s fine for me…

    very good script.. thanksss… :)

  291. 10 Astonishing CSS Hacks And Techniques « HUE Designer

    on April 19, 2010 at 2:13 pm

    [...] Source: Lightbox effect in pure CSS: No javascript needed! [...]

  292. andrew

    on April 22, 2010 at 2:32 pm

    Thanks, a good little script. Even if the title isn’t entirely true!

  293. Akshay

    on April 26, 2010 at 6:06 am

    this is a very good example. faster, smallcode,

    great job………………….thanks:)

  294. SivaPrakashRavi

    on April 29, 2010 at 7:10 am

    Nice Job..

  295. Light box effect collection « SECOND LIFE

    on May 5, 2010 at 5:13 am

    [...] LightBox with CSS http://www.emanueleferonato.com/2007…ascript-needed [...]

  296. Chris

    on May 6, 2010 at 5:14 pm

    A great many people have come on to show exactly how brilliant they are by declaring that the original poster was wrong in his title by stating that the lightbox has no JavaScript. They are either not as brilliant as they think they are or they read an entirely different script that does have JS in the lightbox.

    If you are so brilliant, what are you doing hitting Google wich a search anyway?

    Quite sensibly, he showed an example of a JavaScript trigger of the documented lightbox, but the lightbox itself has ZERO JS. The lightbox itself is made up of CSS & DIVs.

    I say “sensibly” because there are other methods in which you could trigger the lightbox. In fact, they are methods which would work in absolutely any possible browser condition that you could think of… But that doesnt mean you would want to use them.

    I love using JS to add some life to my pages – And I love using as LITTLE JS as possible. Therefore I was pleased to find this NO JAVASCRIPT lightbox, but would still use that little JS to trigger it.

    I would actually like to thank the poster for going out of his way to share with others, and I feel sorry for him that his payment for doing so was a lot of people crapping on his doorstep and making themselves look like complete idiots.

  297. Lisa Pecunia

    on May 10, 2010 at 8:53 pm

    Emanuele -

    This was very easy to implement and also to modify to match my own site’s style. Thank you so much for sharing it, you saved me a ton of time.

    Lisa

  298. Saravana

    on May 11, 2010 at 8:17 am

    Hi,

    I need to show 1 form in light box which has continue/next button , tat leads to next form in the light box.. like wise need to show 4 forms /div in light box

  299. 30+ Useful Ajax Lightbox and Modal Dialog Solutions | Dottony

    on May 11, 2010 at 8:42 pm

    [...] Creating Lightbox with CSS [...]

  300. Jason

    on May 14, 2010 at 3:41 pm

    This is only useful if you have a website that doesnt have a scroll bar. if so it is pointless.

  301. Ashish

    on May 27, 2010 at 11:41 am

    I like very much.its also work but how to implement for number of image.plz reply me.

  302. Smart Parenting

    on June 1, 2010 at 11:26 am

    I have tried this with IE6 and IE7 and it doesn’t work.

  303. FireRoxy

    on June 8, 2010 at 12:20 pm

    is this really made without javascript? wow! great tutorial.

  304. s4sheila

    on June 10, 2010 at 5:47 pm

    Easy to follow, and works perfectly with Firefox! Yes, there are like 2 lines of Javascript in the code, BUT they are very easy to use (just copy paste!). This is coming from someone who has never ever used Javascript at all until now for this effect.

    I then simply used CSS to style the lightbox the way I wanted.

    Thank you for your time and effort, Emmanuele! Am definitely using it for my exam presentation!

  305. Yakup

    on June 11, 2010 at 9:32 am

    I tested also for flash games and it works great!!!

    See a demo: http://www.spellen-spelen.nl/lightbox-with-css-only.html

  306. toms bike corner

    on June 13, 2010 at 9:19 am

    thanks. Awesome especially when you think that a lot of guys deactivate js in their browsers.

  307. ????? ????

    on June 14, 2010 at 3:47 pm

    Very nice tut man i just used it

  308. Fulano

    on June 14, 2010 at 7:35 pm

    Does anyone knows how to avoid the select options to show over the divs?

  309. RE

    on June 15, 2010 at 12:41 pm

    Great work! Thanks!

  310. jonathan

    on June 17, 2010 at 3:20 am

    i want to know if i can have a picture load instead of just text

  311. therealanodyne

    on June 19, 2010 at 5:15 am

    @jonathan
    Come on boy, just read a little bit, everything is explained well…

    Interesting post Emanuele, grazie molto,
    therealanodyne

  312. so.unretro

    on June 26, 2010 at 12:31 am

    This is awesome i want to use it but where does the pictures go? can you tell me

  313. Reiner

    on June 29, 2010 at 3:53 pm

    I’d like to use this cute little thing. If js or not, I don’t care.

    But how to make this baby work with an iframe? I have a link inside an iframe, which should show additional info on some point there.

    The iframe contains an input form for a payment gateway, shown inside a shops paymentsite. The lightbox should appear if clicked on an info button on the form. There is then a combination of text and pictures shown.

    It seems to work only inside the iframe, the outside isn’t covered with the black overlay.

    Also it seems, that there are problems with IEx.The layer seems to be behind all the form objects. Any help appreciated.

  314. Arshad Cini

    on July 9, 2010 at 4:12 pm

    Thanks for the tutorial
    I’m definetely gonna try it

  315. sgwebdesigning » Blog Archive » Lighbox effect with CSS – No Javascript needed

    on July 12, 2010 at 6:40 am

    [...] Readmore [...]

  316. chinathambi

    on July 20, 2010 at 11:03 am

    how to insert the flash file into to css fully.
    chinathambi

  317. Ricky

    on July 21, 2010 at 11:58 pm

    Awsome man really simple sleak and fit right into what i needed for my project you da man!

  318. Coward

    on July 23, 2010 at 5:31 am

    Hahaha. No JS. Classic.

  319. Janjoun

    on July 27, 2010 at 7:35 am

    Reiner,

    Use the following (I added “parent.” to the beginning of each of the lines) to enable this on an iFrame:

    parent.document.getElementById(‘light’).style.display=’block’;

    parent.document.getElementById(‘fade’).style.display=’block’

  320. Timbo

    on July 30, 2010 at 12:15 am

    AWWWSOME!!! I’m so glad I found this! Thank you!

  321. fef

    on August 3, 2010 at 9:10 pm

    Hi, i used it an it works fine on firefox, but i’m having probles with it on IE. I have a flash banner and it is positioning on top of the “lightbox”… how can i solve this??

  322. Nathan

    on August 4, 2010 at 6:55 am

    Hi, When I put 2 different (Or more) lightboxes on the same page, all the links open up the same exact lightbox even though I created other lightboxes with the code. How would I change the classes if this is how you do it? Would I have to copy the same CSS on the page and paste as much times as I need lightboxes with different classes?

    Thanks,
    Nathan Johnson

  323. Aji Prabowo

    on August 5, 2010 at 12:03 pm

    great info, so now I can have lightbox effect without using javascript.

    thanks,

  324. Create a Lightbox effect only with CSS – no javascript needed « Let's share and win the challenge of life

    on August 5, 2010 at 12:04 pm

    [...] Create a Lightbox effect only with CSS – no javascript needed Posted on August 5, 2010 by ajiprabowo Create a Lightbox effect only with CSS – no javascript needed [...]

  325. Nathan

    on August 6, 2010 at 8:25 pm

    Thank you! This works great! You can see how I am using it on my website at http://www.nathansmusicstudio.cz.cc Just click the “Subscribe to our newsletter! Click here!” Link and the lightbox will pop up. I just want it to show a loading image though! Do you know how to add a loading image when the lightbox is loading into:

    .black_overlay{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);

    }
    .white_content {
    display: none;
    position: fixed;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 455px;
    padding: 15px;
    border:5px solid black ;
    background-color: white;
    z-index:1002;
    overflow: no;

    }

    Subscribe to our Newsletter!
    Click Here!

    Content of lightbox goes here

    To close, click Close at top

    <!—->

    If you’d like the “Close X” button at the top you will have to have the picture on your server.

    But I want to put a loading image when the lighgtbox loads and I want it to fade in and out. Does anyone know how to do this?

  326. Nathan

    on August 6, 2010 at 8:27 pm

    Sorry, that last comment was wrong, here is the right code:

    .black_overlay{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);

    }
    .white_content {
    display: none;
    position: fixed;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 455px;
    padding: 15px;
    border:5px solid black ;
    background-color: white;
    z-index:1002;
    overflow: no;

    }

    Subscribe to our Newsletter!
    Click Here!

    Your content goes here

    To close, click Close at top

    <!---->

    But I want to put a loading image when the lighgtbox loads and I want it to fade in and out. Does anyone know how to do this?

  327. Nathan

    on August 6, 2010 at 8:27 pm

    Those last 2 comments, please ignore them. The code is rendering instead of showing it.

  328. Nathan

    on August 13, 2010 at 4:19 am

    How can I make the lightbox show a loading picture when its loading?

  329. jelle vanhijfte

    on August 16, 2010 at 2:22 pm

    i got the css in the head, other code in the body. want to display more than one picture but it keeps on showing the first one, although all links are correct.

    like this:
    Display picture1:


    Afbeelding sluiten

    Display picture2:


    Afbeelding sluiten

    so, instead of picture 2 AGAIN picture1 displayed.
    why is this?
    ps still the SMALL picture 2 IS displayed, its only the large picture 2 thats not displayed, but as said, picture 1 again

  330. tucker

    on August 17, 2010 at 2:38 am

    if you try to do more than one image the first shows up on the second image?

  331. Web design Brisbane Adriana

    on August 25, 2010 at 5:27 am

    Thanks for the post!
    It is a very easy CSS to handle and very well explained. Explained for Graphic designers, not for programmers. Easy to understand. I just used it and worked great!
    Thankssss :)

  332. polat

    on August 25, 2010 at 4:40 pm

    There is a misunderstanding here.
    You are saying no javascript but in fact you are using
    javascript:void(0) and more importantly document.getElementById() which is I think the core of javascript.

    Thanks

  333. Felippe

    on August 27, 2010 at 7:50 pm

    Fantastic work. Congratulations!

  334. Rob

    on August 28, 2010 at 3:53 am

    How hysterical can some “designers§ be.

    A lot of you sound like little, frustrated queers!

    Got no other problems? Yes he wrote “with no javascript needed” and yes there is javascript. But it’s not World War II my little hysterical girls.

    Just think “He has no idea about scripting” and forget about it.

    If you would loose your little dick, you would have a reason to scream like a hysterical woman.

    Act like men, please!

    ROB

    http://css3.webdesign-labor.de

    Ah yes! For all the cripples using Internet Exploder: This site is PURE CSS3 (you know what I mean: The future)! So if you want to see it, get yourself a REAL browser an not that crappy piece of shit from Microsoft.

    Safari, Chrome and Firefox if you know what that is.

    But most of the schreaming bitsches with little dicks have got no clue.

    have a good one.

  335. Anas

    on September 1, 2010 at 5:51 pm

    Thanks for that… it helps!! :)

  336. Anas

    on September 1, 2010 at 6:47 pm

    Most people actually uses lightbox for poping up some divs / forms or some information. This hack just does the right thing in the most straight forward manner… Bravo!

  337. govind

    on September 3, 2010 at 8:46 am

    Thank for posting.It is very useful for my project.

  338. axel

    on September 5, 2010 at 9:08 pm

    there is one intresting exemple of lightbox
    http://prootime.ru/facebook-like-lightbox

  339. hodgey87

    on September 7, 2010 at 1:48 pm

    Is there a way you can modify the code so that the litebox opens up above the link that was clicked ie half way down the page. Rather than have it aways open at the top.

    Cheers

  340. John Dee

    on September 7, 2010 at 4:10 pm

    Many thanks for contributing this!

    Don’t seem to have any problems since my client doesn’t care about IE anyway. Works prfectly with FF.

    Again, many thanks! Much appreciated!

  341. czmarci

    on September 9, 2010 at 8:02 pm

    it’s cool. Thanks ;)

  342. 25???CSS???? | ????

    on September 11, 2010 at 9:24 pm

    [...] technique [...]

  343. Create a pop-up lightbox upon body onload | AjaxApp.com

    on September 15, 2010 at 10:41 am

    [...] The lightbox creation using CSS was borrowed from the CSS lightbox effect from emanueleferonato.com [...]

  344. Anton @ Quicken Websites

    on September 15, 2010 at 9:37 pm

    You people are crazy! Liked the idea, although for some reason black square doesn’t cover the whole width on my 1600 x 1024 monitor, used jQuerry, but definately keep that trick in a pocket for quick popups. Good post eh!

  345. arun

    on September 21, 2010 at 5:19 am

    i have error on black overlay height that is not full

  346. Brown Pooper

    on September 22, 2010 at 3:14 pm

    For all the idiots who complain about opening the same picture every time, even when more than one are defined, how about giving it a different ID, dickheads?

  347. 15+ Pure CSS Effects and Tips | Design Dazzling

    on September 30, 2010 at 12:24 pm

    [...] Create a Lightbox effect only with CSS – no javascript needed [...]

  348. ravi

    on October 2, 2010 at 6:21 pm

    Hi, Feronato this is very nice post.thanks.I just wanted to create a simple lightbox!

  349. saas

    on October 8, 2010 at 1:55 pm

    superb concept…i was trying to use thickbox,fancybox etc
    but it was not helping because all they need click or link..and with div concept that too with CSS helped me to
    complete my task…thanks a lot for your wonderful work…

  350. Martin

    on October 10, 2010 at 10:05 pm

    Emanuele, grazie for this simple, lean and clean solution.
    I use it to embed a YouTube video on my site: http//www.appedu.at

  351. david

    on October 12, 2010 at 10:17 pm

    Ciao,

    ottimo lavoro, mi chiedevo de era possibile un effetto onmouseover sul link che apre il light box

    comunque un ottimo tutorial

  352. Pure CSS Effects and Tips | Designing Mall

    on October 18, 2010 at 8:19 pm

    [...] Create a Lightbox effect only with CSS – no javascript needed [...]

  353. Oliver

    on October 21, 2010 at 2:56 pm

    Hi,

    I am having the same problem as a few others. I want to use the lightbox for a set of images but the lightbox only shows image 1.

    Which part do I give a different id to?

    Thanks

  354. Saul Rosenberg

    on October 23, 2010 at 11:28 pm

    Wait a second.. I used JavaScript… I want my money back!!! Regardless of the title, this is a great piece of work, to do this effect in a manner that has a light footprint. I was able to encapsulate in a single java script function which worked really well (if you don’t mind the java script).

    The rest of you haters should spend less time bitching and more time coding and cut the author some slack.

  355. Cryoffalcon

    on October 31, 2010 at 3:16 pm

    Well this is the most amazing widget which one should use, i myself really like this one.
    thanks for sharing.

  356. ??? ?? ???

    on November 10, 2010 at 8:55 pm

    using a lightbox application, which is coming in half window size, i need the light box of full window size.

  357. Maurice

    on November 13, 2010 at 12:09 pm

    Oh man, give the man a break.
    Your website is not a work of art either.

  358. sargarmi

    on November 15, 2010 at 12:27 am

    Its very cool but it doesn’t support DDT doctype,
    how is it possible.

  359. mahmusic

    on November 18, 2010 at 12:29 pm

    Thank for posting
    It is very useful for my project

  360. Nayah

    on November 22, 2010 at 3:21 am

    I have a question, can this effect be created on a flash games site, like i have based on your theme and mochi ads plugin. the sites are http://pacman.nayah.org
    and
    http://games.nayahspace.com

    I want to do something like we click on a link and it pop out the game in the light box.

  361. Mr K

    on November 22, 2010 at 7:34 am

    Thanks a lot and hats off to you..
    No javascript lol…

  362. net

    on November 23, 2010 at 8:19 pm

    Hey Thanks for this first of all.

    Im having this code
    [code]
    echo "
    [Edit]
    ";
    [/code]

    But doesn’t works..It opens just for 4 seconds and then Boom!! disappeared!

    How can i fix it ?

    Thanks!

  363. net

    on November 23, 2010 at 8:24 pm

    Here is the code… in pastebin

    http://pastebin.com/njw1Vb7Y

    Thanks again!

  364. Arash

    on December 2, 2010 at 12:01 pm

    Title is just fine. the lightbox has no JS code involved to render it. sure you need js to show and hide the lightbox created by this approach…

  365. kisamesama

    on December 5, 2010 at 5:46 pm

    why u say no javascript? i see a lot of javascript in here…. even if it’s inline.. it’s still javascript.

  366. RakamaGraham

    on December 9, 2010 at 5:21 pm

    i guess he means that it is not exactly necessary to use javascript as it is inline code.

  367. Philippines Virtual Assistant

    on December 10, 2010 at 5:38 am

    I agree … I really am looking for a pure CSS light box :) but this will work for now .. thanks for sharing :)

  368. bre

    on December 10, 2010 at 5:09 pm

    i have the same question

  369. bre

    on December 10, 2010 at 5:20 pm

    can someone please explain how to get the code to work with more than one thumbnail?

    Reply please

  370. goeboy

    on December 12, 2010 at 7:36 pm

    Is it possible to assign this to a submit button, and when i click it the buton submits the information and activates the javascript to make the box appear? email me please! thanks

  371. Manan

    on December 17, 2010 at 1:36 pm

    Excellent and very much easy

  372. gagan

    on December 22, 2010 at 2:03 am

    nice, thanks, its soo easy :)

  373. Ernest

    on December 27, 2010 at 12:52 am

    add body { height: 100% } if you want to make it work in IE6 with doctypes that enable the standard mode like the html5 one:

  374. Doug

    on January 3, 2011 at 6:00 pm

    Thanks for posting this example.

    Very helpful and preferable (for my project) than implementing a more heavy weight Ajax framework.

    And, yeah, it requires a few lines of javascript but it doesn’t require an entire library.

  375. Bing

    on January 9, 2011 at 9:53 am

    I’m very web challenged so bear with me please. I’m trying to load this in a existing page. I’d like to use this to present another web page in the lightbox. I’ve loaded the styles with the other styles in the head but the black overlay does not show up. At least part of the styles are working because the box shows up orange. also:
    Where do I place the url of the web page that I want to show up in the lightbox? I assumed in place of “javascript:void(0)”after lightbox content but it will not show up until I click the close button, then it replaces the original page. Help?

  376. Live Video Tutorial » 30 Advanced CSS Techniques

    on January 9, 2011 at 3:59 pm

    [...] is another useful  technique that is using CSS and a little Javascript to create the lightbox [...]

  377. Bass

    on January 11, 2011 at 9:51 pm

    Ernest,

    Adding “body { height: 100% }” still not working. Kindly post the full css paragraph. that might be helpful.

    Thx

  378. John

    on January 14, 2011 at 2:24 pm

    Great piece of coding. Thanks

  379. Jon Garcia

    on January 21, 2011 at 7:56 pm

    Very useful, thanks……..most scripts these days are far too bloated.

  380. Felipe Saab

    on January 29, 2011 at 9:11 pm

    AWESOME!!!
    You just saved my life!! :D

  381. Lightbox Effect Only With CSS – No Javascript Needed | Download Source Code, Source code available, Opensource source Code Download,Free source Code,Script, Free Download Source Code,Free Download Script

    on February 3, 2011 at 8:12 am

    [...] Download [...]

  382. 20 FREE Online CSS Resources to Quickly Enhance Your Website Design Abilities | Programming Tips That Help You Become a Better Programmer

    on February 11, 2011 at 10:53 am

    [...] 13. LightBox Effect Using CSS Only [...]

  383. me

    on February 11, 2011 at 7:43 pm

    How about you shut the fuck up?
    If I want to complain about some jerk mislabeling their articles so they get more clicks, then I will!
    I expect people to use accurate headlines for their work, not to trick people into looking at it by giving it a title that implies the content is more useful than it is. Then, I have some douche in the comments telling me to not comment on the article’s misleading (lying) title because the article is useful to them. Eat my dick, you selfish a hole.

  384. me

    on February 11, 2011 at 7:48 pm

    That’s if you want to hide behind technicality. I hate when people try to be so weasely with language like you are attempting to do.
    Anyone not trying to become a lawyer would agree that most people consider a “lightbox effect with only css” to mean it uses NO JAVASCRIPT AT ALL. Not a hard concept to understand, dude.

  385. obma

    on February 16, 2011 at 12:11 pm

    that is not working in IE 6 plz some 1 help me

  386. Steven Smith

    on February 17, 2011 at 7:06 pm

    It’s possible to work iframe HTML in the lightbox content..

    if yes, how do it working just put sample.html something like that??

  387. web tasar?m?

    on February 19, 2011 at 5:00 pm

    nice sharing.. thank you..

  388. Nathan Johnson

    on February 19, 2011 at 6:08 pm

    Guess what! I foudn out how to make a loading appear when the lightbox is loading and you can use jQuery to fade in/out the box and the black_overlay!!! It is awesome and works great! I am so glad I know jQuery and I made it where it says “Loading content” with an Ajax loading image and then the content fades in. I just use the JavaScript setTimeout() to make the loading image disappear and make the content of the lightbox appear. It’s sweet! If you want to see it, please email support@nathansmusicstudio.cz.cc and it will open a ticket on my website. I will help you there.

  389. Nathan Johnson

    on February 19, 2011 at 6:10 pm

    @obma: Dude, it wont ever work in IE 6!!! Hahahahahahaha Do you honestly use IE 6? If you do you need to UPDATE!!!! Wow, IE 6 it so outdated I even make my website not work with it! IE 6 wont work with my site at all! Wow, really, update to IE 8 or 9!

    Sincerely,
    Nathan

  390. shyam

    on February 21, 2011 at 3:21 pm

    thank for this lightbox code

  391. Stickman

    on February 28, 2011 at 6:59 am

    This is a wonderfully short and sweet script. It didnt take much for me to understand and then manipulate it into a nice dashboard photo display.
    I was lost before your insight, so I just wanted to say thank you and nicely done!

  392. web design dan

    on March 12, 2011 at 11:18 am

    this is a great piece of coding, hardly anything to it its just the kind of lightweight solution i have been looking for it just needs a bit if work to create a nice transform effect if i can do that and still only use a bit of js then its probably the best out there thanks

  393. d_nitemarez

    on March 14, 2011 at 3:31 pm

    this is a great little code.. I’m a web designing noob and looking for a simple lightbox for various contents (html & image) and this has exactly that.

    It’s short, precise and delivered exactly what it promised. I’m going to add my bit of code to it to tailor it as per my requirement. Kudos!

  394. Anonymous

    on March 16, 2011 at 5:29 am

    The actual effect is 100% CSS, while the call is in JavaScript.

  395. ???????????????? lightbox ?? frame « ??????????????????:km tool

    on March 19, 2011 at 6:16 am

    [...] + http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need… + http://blog.lysender.com/2010/07/scale-image-lightbox-another-javascript-hack/ + [...]

  396. Yasen Vasilev

    on March 20, 2011 at 9:51 pm

    Hi, guys! I made some changes to this code.
    For example, you don’t need to click on Close button, but anywhere out of the lightBox, also if you scroll down the page while the white_box is display: block, you won’t see the fade div end at some point. That one was just changing position to fixed. And I also made the code work for two buttons. http://menian-lee.eu/tutorial/lightbox/ Cheers

  397. SEO Hyderabad

    on March 23, 2011 at 5:04 am

    thank you very much

  398. and bird

    on March 23, 2011 at 9:23 am

    thanks .. this was exactly what I was after..

  399. Dingus

    on March 25, 2011 at 11:25 pm

    Simply fantastic. Thank you.

  400. tsolmon

    on April 1, 2011 at 12:26 pm

    GREAT,thanks, it’s very very simply , and great, GOOD LUCK for you

  401. Mit Div Containern die gesamte Seite strukturieren - TYPO3 Forum & Portal

    on April 14, 2011 at 10:49 pm

    [...] [...]

  402. thank you

    on April 15, 2011 at 3:28 am

    this sure is useful. Thank you so much!

  403. Kam Agra

    on May 1, 2011 at 8:17 pm

    I have to agree very good work very impressiv

  404. Grzegorz

    on May 3, 2011 at 1:26 am

    I suggest you use “position: fixed” instead of “position: absolute”. Thanks to this effect is still visible while scrolling.

  405. David

    on May 3, 2011 at 4:52 pm

    I love this . Thanks

  406. Generika

    on May 7, 2011 at 9:20 am

    ok it worked with position fixed thanks for the info :)

  407. Articles

    on May 10, 2011 at 2:00 pm

    thanks for the post is helpfull :-)

  408. Sagar

    on May 11, 2011 at 8:06 am

    I tried too many lightboxes scripts but none of them worked for me ….. may because of conflicting javascripts…and this is just awesome, it worked smoothly.

  409. Austin

    on May 12, 2011 at 8:49 am

    Already using lite box in my sites http://www.seoplusweb.com and http://www.opentech.co.in ,But this is quite good .slide smoothly thanks for the information .

  410. Tuomas Lecklin

    on May 12, 2011 at 1:40 pm

    Ridiculously good stuff, working absolutely FANTASTIC! Managed to place Google Maps in a lightbox thanks to this, and it was so easy, plus the system is so damn light!

  411. Adrian

    on May 16, 2011 at 12:37 pm

    Great effect, thanks.

  412. Josh J

    on May 16, 2011 at 10:42 pm

    FYI, your web site has an ad video that plays automatically with sound unmuted. Pretty annoying.

  413. Shane

    on May 17, 2011 at 6:33 pm

    @elf boy (2008)

    Elf boy asked about how to stop the video player after he embedded a youtube video in the lightbox. I have worked out a simple solution that can be found by clicking on one of my a tags at http://rexburgcitydeals.com

    All I did to accomplish this was to add a new paramater to the onclick event for the word close (it’s a close icon in my case). The paramater to add is “window.location.reload( true );” All this does is refresh the iframe so that the video closes.

  414. Marcello Cannarsa

    on May 18, 2011 at 5:44 pm

    Good tutorial :D !

  415. Flutterbug

    on May 24, 2011 at 9:58 pm

    Just wanted to say thanks. Absolutely fit my purposes, still flexible enough for modifications.
    Very mistrustful of javascript as I’m working on sites with other authors and we’ve had problems with script conflicts. This was a completely safe alternative.
    Thanks!

  416. JC

    on May 26, 2011 at 5:34 am

    Alternatively you can place the lightbox div inside the overlay and then just hide/show the overlay.

    Haven’t tried this in IE 6 (which I doubt will work), but then again, who cares?

    Thanks.

  417. Jenna

    on May 27, 2011 at 5:26 pm

    how do you add more than one image to the lightbox? like a gallery? i tried the code 3 times on one page but the popup was the same picture, even though i changed the image url.

    thanks!

  418. Joseph

    on May 28, 2011 at 10:01 pm

    I’m having the same issue as Jenna. I’m trying to use this code for more than one image but the same one appears. How do you fix that?
    Thanks

  419. Scuf

    on June 2, 2011 at 9:29 am

    I have also the same problem
    I hope one post .. how we can fix this.
    Thanks

  420. Mila

    on June 3, 2011 at 1:58 am

    Same question as Jenna, Joseph and Scuf! How do you load more than one image or video?

  421. erickjohncuevas

    on June 5, 2011 at 8:45 am

    Thanks Emanuel, this one saves the day! its very ez!

  422. Germán Arciniegas

    on June 7, 2011 at 2:03 am

    There is teh solution to the problem for adding more than one lightbox: http://menian-lee.eu/tutorial/lightbox/

  423. Sabr

    on June 8, 2011 at 10:38 am

    Effectivement Jenna a raison,

    cela fait trois heures que j’essaie d’adapter le code…. sans succès …

    le display block ne retient que la première image !!!

  424. Joseph

    on June 8, 2011 at 2:21 pm

    Thanks German Arciniegas. Very helpful!

  425. Rodrigo

    on June 15, 2011 at 2:47 am

    Thank You Very Much!
    It´s really help me!

  426. Re-KamagraNol

    on June 18, 2011 at 9:09 pm

    Javascript is the code…but the volume of it is very less! Great, light and flexible css code. Thanks to the author!

  427. Simple CSS Lightbox | codercom.net

    on June 19, 2011 at 3:42 pm

    [...] and of course myself too. If you intend to access the original tutorial you can browse this URL: create-a-lightbox-effect-only-with-css-no-javascript-needed Posted in Blogs, Coding, CSS Tags: css lightbox, simple lightbox Magento check if current page [...]

  428. Jacob

    on June 21, 2011 at 7:26 am

    Hi, I am using this code but if i try to use it withing the same page it would bring up the content from the first block.?????? Any Thoughts?

  429. Brian

    on June 23, 2011 at 1:46 am

    Perfect
    &
    Elegant

  430. Shami Photos

    on June 25, 2011 at 12:31 am

    Really Excellent, That I have need. And this site provides me :)

    Thanx

  431. Faisalabad Photographer

    on June 25, 2011 at 9:32 am

    Its not working on my site:( i think i have made some mistakes.

  432. Captain Obvious

    on June 30, 2011 at 7:10 pm

    0% javascript, except for the javascript. Butter is 0% fat, except for the fat. This article title is 100% truthful, except for the lies.

  433. Ankauf Toner

    on July 20, 2011 at 2:32 pm

    Nice work & big thx!!!

  434. A1C Levels

    on July 21, 2011 at 3:06 pm

    Excellent code, I’ll use it on my website.

  435. ????? ?? ????

    on July 26, 2011 at 7:24 pm

    this sure is useful. Thank you so much!

  436. Build a jQuery Lightbox Effect – Best Tutorials

    on July 28, 2011 at 7:55 am

    [...] Tutorial Demo [...]

  437. Tester

    on July 29, 2011 at 1:46 pm

    This is good code but Its does not call the external source file in this light box.

    Like Image or any other html file in this lightbox..

    If you have a code to display external source file (like image and html file) in your light box then

    send me in my mail.

    Thank you

    Tester….

  438. Hermie

    on August 1, 2011 at 10:08 am

    Thank you!

    This is nice script, simple but useful.

    Have a nice day!

  439. Anna

    on August 1, 2011 at 2:06 pm

    What a great script!

    But im having some problems making the whole background fade. Where do i put the code so it fades the whole site, not just the div it lays in? When I try to move the div:s the whole site fades incluing the “light” div.

    Can you help me?
    Thank you!

    /Anna

  440. jonnes

    on August 3, 2011 at 2:47 pm

    Thanks Emanuele, it´s work perfectly for me.

  441. Build a jQuery Lightbox Effect – Best Tutorials - Part 2 | Tradecogroup,Google AdSense Optimized WordPress Theme Gallery

    on August 6, 2011 at 10:31 pm

    [...] Tutorial Demo [...]

  442. Shaikh Mahbubur Rahaman

    on August 8, 2011 at 12:29 pm

    it a very helpful tutorial.thanks a lot

  443. IT Rush

    on August 13, 2011 at 3:32 pm

    Amazing, this is just what I’m looking for.. thanks for sharing this one..

  444. Khalid Ahmed Haryah

    on August 23, 2011 at 8:29 am

    thank you .
    this code is easy to understand b/c css is used mostly.. bt a little bit of javascript is also included in this.. even a beginer can efficiently understand this code && implement into his/her applications…..

  445. carlos madeira

    on August 25, 2011 at 4:36 am

    Fantástico, eu usei este código pra colocar um player de vídeo em um site que estou criando! Ficou muito bom.

    Obrigado era oque eu estava querendo.
    =========================================================
    “translated by google translator.”
    Fantastic, I used this code to put a video player on a site I’m creating! It’s pretty good.

    Thank you was what i was needing.

  446. andy

    on August 25, 2011 at 11:48 am

    hi, can you help?

    if you put the code in a HTML table, it will not work in IE8.

    can anyone help, please?

    thanks
    andy

    please repost _and_ email to:
    lightbox_without_javascript@bodw.net

  447. kuldeep sharma

    on August 27, 2011 at 6:05 am

    Thanks for ur help. very nice code.

  448. DjZiKaRiO

    on August 27, 2011 at 5:20 pm

    Thanks very much I used this code on my website check it out http://787Beats.CoM I would like to know how can I make it stay in the center even while scrolling?

  449. DjZiKaRiO

    on August 27, 2011 at 5:58 pm

    I got code to make it centered but does not display correctly in IE

    .white_content {
    display: none;
    position: fixed;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 277px;
    padding: 15px;
    border: 4px solid #2b2b2b;
    background-color: #141414;
    z-index:1002;
    overflow: no;
    border-top-left-radius: 10px 5px;
    border-bottom-right-radius: 10% 5%;
    border-top-right-radius: 10px;
    }

  450. Victor Zimmer

    on August 28, 2011 at 4:36 pm

    Maybe he meant “No JavaScript knowledge required”???

  451. Rify

    on September 8, 2011 at 11:31 am

    thank for giving this code.. it working fine…

  452. Rok Jakli?

    on September 8, 2011 at 2:25 pm

    Nice code, thank you.

  453. Ralf

    on September 9, 2011 at 3:46 pm

    Problem with IE 8: switching grey background on leads to total grey page and I can not enter any daty into the form fields …

    Do these css classes fit for IE 8 ?

    .black_overlay {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #dddddd;
    z-index: 1001;
    -moz-opacity: 0.6;
    opacity:.60;
    filter: alpha(opacity=60);
    }

    .white_content {
    display: none;
    position: absolute;
    top: 95px;
    left:50px;
    border: 1px solid black;
    background-color: white;
    z-index:1002;
    overflow: auto;
    }

  454. Build a jQuery Lightbox Effect – Best Tutorials | Templates, Scripts, CMS, Graphics, Fonts, Flash, E-Books, 3D, Tutorials, Wallpapers.

    on September 11, 2011 at 2:32 am

    [...] Tutorial Demo [...]

  455. Rajiv

    on September 12, 2011 at 6:55 am

    There are some who complain about how this has javascript. It is obvious that the author is aware of the tiny bit of js in there. What he obviously means that this does not use any kind of javascript library. So unless, you can provide a cross-browser pure css solution, stop making stupid remarks.

    Some say that this is not commercial grade. Most of us are not really developing Amazon.com or ebay.com – For most sites this is OK.

    For those of us who do not know javascript, jQuery solutions are a blackbox, and changing the behaviours of the jQuery modals becomes a struggle. With with this, if you know a bit of a css, you have some idea as to what is happening. And very little code is involved.

    I use this technique at a few of my websites. They work fine. Did have problems with IE (who does not). I am not sure what I did to fix. It works on IE8. I did not check with other lower versions. I am willing to ignore people who are on IE6. You do need to have the doc type right for this to work on IE. I use the following:

    I very much appreciate this author’s efforts.

  456. Rajiv

    on September 12, 2011 at 6:58 am

    The doctype I use is

    DOCTYPE HTML

  457. bredon

    on September 12, 2011 at 12:15 pm

    hi, im a beginner at this, any chance you could explain how to use this on multiple images per page? at the moment even if i change the source image the one displayed remains the same?

  458. thilakar

    on September 13, 2011 at 12:40 pm

    very nice! weightless light box.

  459. Trying to incorperate a really simple light box. How do I stay centered on scroll? | SeekPHP.com

    on September 13, 2011 at 2:24 pm

    [...] http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need… [...]

  460. AJAY

    on September 15, 2011 at 11:30 am

    simple to understood by everyone….

  461. Tauqeer

    on September 15, 2011 at 3:11 pm

    Very simple and easy to use. Thanks

  462. John_Doe

    on September 16, 2011 at 9:31 am

    @bredon change the id’s

  463. Steve

    on September 16, 2011 at 11:20 pm

    I like the part where he says “no javascript needed”…
    And then I like the part where he says “now type this javascript”… (paraphrasing of course)

    …annoyed

  464. bredon

    on September 18, 2011 at 11:23 am

    Thanks john_Doe

  465. William Antonio

    on September 18, 2011 at 4:03 pm

    Great post! It saved me a lot of time!

  466. CSS class display problem | SeekPHP.com

    on September 19, 2011 at 2:52 am

    [...] am having the following code from this link for making a Lightbox effect. It is working fine in Firefox and Google Chrome but having problem in [...]

  467. Old FogBugz Discussion Topics - Fog Creek Blog

    on September 22, 2011 at 11:55 am

    [...] You can view the code I used for the lightbox effect. [...]

  468. Hazard

    on September 23, 2011 at 7:15 am

    How can we do this for more than one thing?

    Like, one link opens one lightbox; another link opens a different lightbox.

    Thanks.

  469. Hazard

    on September 23, 2011 at 7:39 am

    You can see my implementation by clicking on “Mona Lisa” on this site: http://goodandbadinventions.tumblr.com/

    I changed a few attributes. I definitely found that fixing the position of the lightbox worked better that keeping it absolute. I also had to make the darker area much larger. And I changed to border color.

    I haven’t given it much thought yet, but I can’t seem to figure out how use this code for more than one link on the same page.

  470. John

    on September 24, 2011 at 10:22 pm

    Thank you so much this was very helpful :)

  471. RABI

    on September 27, 2011 at 9:37 am

    thanks lot
    for salve my great problm

  472. Shea Smith

    on October 8, 2011 at 5:22 am

    Thanks for the code! I am building my site from scratch. I know basic html, but hadn’t ventured into css or java or flash or anything else. I wanted a lightbox, but didn’t need or want it to be complicated. I used your code, put it in a blank dreamweaver file and then started tweaking it bit by bit to fit my needs. I also visited a couple of sites of others that commented to see how to add the extra codes I needed. Thanks again, it was a big help and fun working with. My page with my lightboxes is http://www.sheasmith.com/photos.htm

  473. Lauren Free samples

    on October 9, 2011 at 3:09 pm

    Thank you so much my friend.This article save a lot of my time.

  474. karna

    on October 11, 2011 at 3:14 pm

    Nice concept very good thinking i like this work…

  475. lokesh

    on October 15, 2011 at 8:05 am

    Many many thanks for this. I wanted to put a pop on click at services, where it should be describe. But all popup gives browser windows.

    Thanks you solved my problem…

  476. minyatoor

    on October 15, 2011 at 5:30 pm

    I always knew that css created the world

  477. shumaila

    on October 22, 2011 at 9:25 pm

    Thanks buddy it helps a lot.i put this code in my website but one more thing i want to auto hide this popup form mean when i click on link it show but when i click on next link previous popup window disappear and new show with its on contents.please replay me soon.

    Thanks

  478. Air

    on October 25, 2011 at 8:21 pm

    You could also in the black overlay:

    and also the white space

    So when a user clicks the black overlay or any where in the whitespace other than the content of the actually whitespace it removes the overlay and white space.

  479. Bikram

    on October 26, 2011 at 6:21 am

    Thanks dude…..its amazing with a bit of javascript and css magic.

  480. freelance web designers websites in hyderabad

    on October 31, 2011 at 6:30 pm

    Exelent works

  481. Cors

    on November 4, 2011 at 11:46 am

    Awesome! Exactly what i need…!

  482. simple light box from scratch | jQuery Blogging

    on November 6, 2011 at 8:33 am

    [...] http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need… This entry was posted in Uncategorized. Bookmark the permalink. ← CSS3 support for Internet Explorer 6, 7, and 8 How to check which application is listening or opening to Port 80 on Windows → [...]

  483. mctaco

    on November 14, 2011 at 6:27 am

    Great script for simple stuff! I actually used it since in a school project I am not allowed to use external libraries (if so I would use fancybox). Just change the position: absolute to position: fixed like some of the guys said so that it can work with pages with scrolling.

  484. munna

    on November 14, 2011 at 6:17 pm

    Many many thanks for this. I wanted to put a pop on click at services, where it should be describe. But all popup gives browser windows.

  485. Ashok Rathod

    on November 22, 2011 at 10:19 am

    please give code about the Light box effect on the mousing clicking

  486. Form Validation Via Jquery

    on December 8, 2011 at 5:26 pm

    I was looking either this can be used to validate the Form???

  487. freelance web designers

    on December 12, 2011 at 6:00 pm

    really nice source am using it for logins forms

  488. Simple CSS Lightbox | CoderCom.net

    on December 19, 2011 at 9:10 pm

    [...] If you intend to access the original tutorial you can browse this URL: simple css lightbox [...]

  489. Yass

    on December 24, 2011 at 12:31 pm

    This is awesome. I know nothing about web design and from all the tutorials I’ve found, and after failing so many times because of how complicated they are, this tutorial made it for me. Now I can display text in a lightbox effect.

    I do have a question though, and I hope you can help me with this. If I use the same code for a second or third link, even if the text to displayed on the lightbox is different, after I save the code and preview the page, every link opens the same lightbox with the same content. I don’t know if you understand what I’m trying to explain.

    Thank you in advance for your future response.

  490. niko

    on December 27, 2011 at 11:03 pm

    I need the x in the superior cortner please a way to do that

    sorry for my english

  491. Marcelo

    on January 9, 2012 at 5:32 am

    Hi. Yes, it usee JavaScript. It’s impossible to make a Ligtbox withous JS. I’ve made a pure CSS lightbox, but need a little tricky (no JS, or PHP, or any, just CSS).

    #prueba
    {
    background:green;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    visibility:hidden;
    }
    a:active
    {
    visibility:hidden;
    }
    a:active+div#prueba
    {
    visibility:visible;
    }

    Mostrar
    Contenido de prueba

    It works if you click the link and drag the mouse outside the link a pair of pixels. After that, you can release the mouse and you´ll have the DIV active. Just click it to hide.
    Hope it works for you.
    Bye from Argentina.

  492. oscar

    on January 18, 2012 at 5:25 pm

    excelente me gusta.

    buen aporte…

  493. 10 k? thu?t css cross-browser | V-Share Team

    on January 22, 2012 at 2:39 pm

    [...] Bài h??ng d?n s? ???c ?? c?p trong m?t bài khác. Các b?n có th? xem b?n g?c t?i: http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need… [...]

  494. Dermot

    on January 25, 2012 at 1:54 pm

    Thanks for the lightbox css code. Works a treat!!!

  495. Txai Mostardeiro Potier

    on January 25, 2012 at 2:18 pm

    thank’s VERY VERY MUCH!
    was exactly what i was looking for!
    thank you!

  496. website designing in chennai

    on January 31, 2012 at 3:49 pm

    Really Nice work. Continue

  497. dw

    on February 24, 2012 at 2:00 am

    awesome! great job.

  498. Konrad

    on February 27, 2012 at 2:27 pm

    lol, just found it. Brilliant. Js is still present, but it is way lighter than lightbox and it does not mess other scripts.
    Great work!

  499. uk immigration

    on March 1, 2012 at 2:33 am

    nice tutorial
    thanks for sharing here

  500. expirehub

    on March 7, 2012 at 8:43 am

    hi, I have see your post it is very good and i love your css effect and you remove the JavaScript.
    thank you
    reply me soon

  501. rajendra

    on March 7, 2012 at 12:42 pm

    vry nice…
    it’s help ful to me a lots..

  502. fizy

    on March 10, 2012 at 4:17 am

    Hi .. Great script! Simple and effective. what is the -moz- in your css? I know it is for Firefox and ie but is it a way to comment?

  503. Liz

    on March 11, 2012 at 8:32 am

    This a wonderfully clear page, thank you.

    I put together a table with excerpts of images in it, all linked to full(ish)-size versions of the work. Would I be able to apply the CSS above to what I’ve already done? I can’t figure that part out.

    Thanks for any help -

  504. kendan

    on March 12, 2012 at 4:35 pm

    simple = whats counts ;-) thanks

  505. Chris Carrington

    on March 12, 2012 at 10:38 pm

    THANK YOU SO MUCH!!!!!!!

  506. Wayne Gomez

    on March 20, 2012 at 10:00 am

    No java please!

  507. Arun Saini

    on March 20, 2012 at 11:52 am

    Its amazing

  508. putri

    on March 21, 2012 at 3:48 am

    This is really easy and helpful. Thank you.

  509. vla

    on March 27, 2012 at 9:35 pm

    Seriously, thanks. I spent the day trying to make lightbox works with prototype lib. And then abandonned the idea…I then found that… Just awesome. Thanks

  510. srikanth

    on March 30, 2012 at 3:12 pm

    Hello Everybody!!
    I’m a new to php or html..but I am trying to change some code from the existing page.can anybody help me out PLEASEEEEEE…..

    Basically my page pulls data like first name,Last name,photo etc.upon clicking I want the image to popup..I dont know where to add this code in this line..Please help
    CODE:

    select(“select rec_id,record,firstname,lastname,photo_self,status,reg_date,email from family_tree where reg_id=’$reg_id’ order by rec_id”);
    $chk=0;
    while($honey->fetchRow())
    $rec_id=$honey->data['rec_id'];
    $img=$honey->data['photo_self'];
    if($chk < 5){
    if($i==0)
    blah..blah…

    <? if($img)echo "”;else echo “”;?>
    data['firstname']?>
    data['lastname']?>

    blah..blah…

    Any help Highly appreciated
    kranthi

  511. srikanth

    on March 30, 2012 at 3:15 pm

    Sorry some code was deleted..Here’s the code
    if($i==0)
    blah..blah…

    <? if($img)echo "”;else echo “”;?>
    data['firstname']?>
    data['lastname']?>

    blah..blah…

    Any help Highly appreciated
    kranthi

  512. sebr1ng

    on April 1, 2012 at 1:54 am

    Hello!

    I find this very useful. What I want is the gray area to apear over a page with the onload event. I did it like this:

    How could I achieve that is for example between 8:00 and 17:00 the overlay is red and between 17:00 and 18:00 the overlay is green. On other time there is no overlay.

    For detecting the time I used this (and example times entered):

    onload=function(){
    var rightNow = new Date();
    var hour = rightNow.getHours();
    var newDisplay = ‘none’; // unless we see otherwise

    if((hour>= 1) && (hour<= 5)) {
    newDisplay = 'block';
    }
    }

    But I can’t seem to find a way to combine those two to work. Any help is greatly appreciated.

  513. ag0y

    on April 1, 2012 at 9:36 am

    you indirectly using inline javascript inside element
    but anyway thanks very much for this tutorial :)

  514. kilico

    on April 1, 2012 at 4:54 pm

    Just great!!!!
    Described step by step and very easy to reproduce.
    This was just the hint that i was looking for! Not blaming about that little javascript code.
    Many thanks!

  515. partheepan

    on April 4, 2012 at 1:39 pm

    people don’t get excited of seeing the word “without javascript” just be excited to see a light box with such a small coding, that too with CSS dominance.
    i agree my friend Emanuele is right. this code is easily readable and editable comparing to other complex light box codings, so saying it as
    “without javascript” is correct.

  516. bunty jorwal

    on April 7, 2012 at 12:30 pm

    This was just the hint that i was looking for! Not blaming about that little javascript code.

  517. m waris shaikh

    on April 11, 2012 at 1:17 pm

    thnx buddy i tried it and get lots of knowledge. Source code is perfect and easy to understand. Remember me in your prayers. God bless u keep smiling :)

  518. ??CSS?25 ???CSS?? | ????

    on April 17, 2012 at 10:20 am

    [...] is another useful  technique that is using CSS and a little Javascript to create the lightbox [...]

  519. 7 Best Lightbox and CSS LightBox Tutorials - Design Freebies

    on April 18, 2012 at 6:20 am

    [...] 3. Create a Lightbox effect only with CSS [...]

  520. wpmaster

    on April 23, 2012 at 11:21 pm

    You are terrific! Works great. Thanks a lot.

  521. Satz

    on April 27, 2012 at 7:33 am

    i cant get the black overlay too the full page,its works oly to half of my page.. can any1 help?

  522. Nishant Arora

    on April 30, 2012 at 2:26 pm

    thanks for this, I loved the flexibility and light weightedness. I used your code and fixed some bugs as well as added hacks to this and have updated them here http://nishantarora.in/?p=796

    Bugs Fixed:
    1. the lightbox earlier did not show on the entire page, it has been resolved, it remains on top regardless of scrolling up/down
    2. the video kept on running after closing the box, a workaround has been added

    Thanks again!

  523. magda

    on May 7, 2012 at 12:13 am

    Great:) Thanks!

  524. sparxx829

    on May 10, 2012 at 2:24 pm

    oi is it possible to run three or four of these at the same time with images instead of text? if so please email me some script to do so or tell me what changes need to be made.

    thanx

  525. Rod Wilson

    on May 11, 2012 at 11:19 am

    Emanuele … many thanks for this. Fantastic and simple bit of code … got me started in no time … and helped me out big time!

  526. Ken

    on May 18, 2012 at 1:46 am

    “no javascript needed”… yet there is javascript… what a dumb ass.

  527. samriti

    on May 18, 2012 at 12:10 pm

    Thankx for a good code

  528. MIchael

    on May 23, 2012 at 10:22 pm

    Awesome code, Thanks! Probably an overly simple question but any thoughts on how I would change/control the font style and size in the lightbox?

    Thank you!

  529. Reza Amya

    on May 26, 2012 at 10:38 am

    only change “position: absolute;” to “position: fixed;” then it work so better in scrolled positions…

    thanks so much for your nice and clean code.

  530. The simplest type and the most lightweight code for LightBox/Modal/Ajax Popup for your websites, wordpress, joomla, etc. | Nishant Arora's w3BL0G...

    on May 27, 2012 at 2:45 pm

    [...] or Mootools Libs. Now, when I set out to develop a simple solution for my client, I came across Emanuele Feronato’s Blog where she has written some CSS-JS based lightbox code, but it has its own short comings, like [...]

  531. Nugs

    on May 28, 2012 at 12:29 pm

    I’m using this script…but it is conflicting with my Slider Script..which is using Mootools(Compressed.js) pls help

  532. MIchael

    on May 30, 2012 at 7:46 pm

    Thanks again for the great code. Having trouble getting rid of the line breaks before and after the highlighted word. Tried replacing /div with /span (as some suggested) but that broke the code…any help would be greatly appreciated!

  533. nobasho

    on June 6, 2012 at 7:53 am

    This worked great made my photo galleries way better – check them out under galleries at http://ebcomputers.ca

  534. Doaa

    on June 9, 2012 at 5:01 am

    Thanks alot! That was quite helpful.

  535. Tapas Manna

    on June 11, 2012 at 10:57 am

    Javascript alert light box possible?

  536. Tina

    on June 12, 2012 at 2:48 am

    It was a great beginners light box.

    Thank you.

  537. flyingfisch

    on June 15, 2012 at 5:50 pm

    Great code, just one prob with the CSS.

    You should change “position: absolute” to “position: static”. Then your all set!

  538. flyingfisch

    on June 15, 2012 at 5:52 pm

    Ooops! Not “position:static”, I meant “position:fixed” (relative to browser viewport)

  539. nonew

    on June 18, 2012 at 11:10 am

    This one looks great, but my lughtbox are fixed to a position no matter what I do, i CANNOT CENTER THEM. HOw do Ifix that?

  540. Kunal

    on June 22, 2012 at 5:59 pm

    Very nice and classy. Thanks, this helped me!

  541. Eric J

    on June 22, 2012 at 10:09 pm

    Title is very misleading. This uses javascipt!

  542. Skyler

    on June 28, 2012 at 4:34 pm

    There was no javascript needed. . . the link could have gone to another page with the lightbox enabled and the close could have taken you back. . . That is just a dumb way to design. The lightbox itself required no javascript.

  543. Michael

    on July 14, 2012 at 6:02 pm

    Hey I want to use this and have a list of videos but when I try the lightbox always just displays the first video I have… How can I fix this?
    Please help

  544. umeshan

    on August 4, 2012 at 2:05 pm

    how to pop up images using this?

  545. Gobin

    on August 6, 2012 at 1:10 pm

    There is inline java !!!
    False title

  546. Okna drewniane

    on August 10, 2012 at 9:03 pm

    so a little bit a java script code but still there is js

  547. Phil

    on August 13, 2012 at 4:11 pm

    Great piece of work, I needed to be able to include light boxes on a rather limited content managed website and this worked great. I’ve setup a gallery with several images. I’d like to see this develop further, perhaps with Next and Previous buttons.

  548. AJ

    on August 13, 2012 at 6:29 pm

    Hi,

    For the life of me I cannot change the styling of the lightbox hyperlink. I am trying to get this to inherit my font and it seems there is no way???

  549. yessie

    on August 28, 2012 at 11:36 am

    wow it’s the way i need!!!tq so much!!

  550. Bruno Moura

    on August 29, 2012 at 2:58 am

    Nice post!
    but how do I open automatically with the page?

  551. jsk

    on August 29, 2012 at 6:52 pm

    Is there a way to popup a completely different page in the popup box? not just an image or a couple lines of text?

  552. yukti

    on August 30, 2012 at 5:48 pm

    its awesome…..really a good job…………….

  553. thai

    on September 1, 2012 at 4:04 pm

    thanks men.
    I think you should change the position to fixed:
    positon:fixed;
    it will be better.

  554. pop

    on September 23, 2012 at 5:51 pm

    Wow! U really did helped me,
    Thanks..

  555. Emb

    on September 24, 2012 at 10:19 pm

    Very good!!! Thanksss..!!!

  556. Morty

    on October 18, 2012 at 6:16 pm

    Hi! Once I get to Javascript I’m toast. How do I get my “businesscard” image into the white area?

    Best regards:
    novice/intermediate css/html user…

  557. Matheus

    on October 24, 2012 at 1:16 am

    Very good! Alone one more thing: if I want to use elements of smooth transition (in the css, put in the first ‘opacity’, ‘-webkit-transition’, ‘-moz-transition’, ‘-o-transition’, ‘transition’ and after – with ‘:hover’ or ‘:active’ or whathever that be – ‘opacity’), how to do that? Thanks

  558. Lee

    on October 30, 2012 at 3:21 am

    Just what I needed. Thank you.

  559. Sid

    on October 30, 2012 at 3:26 pm

    I am not able to diplsay multiple images on the same page. ( Every lightbox opens up with the same picture)
    Any help would be appreciated.
    Thanks. :)

  560. karthick

    on November 21, 2012 at 9:33 am

    nice but you use in java script. so directly add style in js y u use in css here

  561. BhasuWeb

    on November 24, 2012 at 11:50 am

    I want to put together in same page. Is it possible!!!

  562. Dany

    on December 1, 2012 at 2:29 pm

    Absolutely USELESS! See what happens when your page is longer than the browser window’s height. The lightbox always loads at the top of the page, and you can’t even see it if you’re somewhere at the bottom (assuming the page is long). To combat that, you’ll need position:fixed and not position:absolute. Note that this will not work well on mobile phones. You can get rid of JavaScript with CSS selectors like :target or :focus.

  563. wiyono

    on December 10, 2012 at 7:13 pm

    so creativ, thank for your tutorial, great job….

    regard
    wiyono

  564. reformed media

    on December 18, 2012 at 6:47 pm

    hi,
    Is it possible to have multiple lightbox links on one page. I set it up for each of the link options on the page, but when I click on any of them, it only activates the first instance.

    Can anyone give me some help how to make the individual links pull up the right info when I select the button?

    thanks.

  565. reformed media

    on December 18, 2012 at 6:48 pm

    oops, forgot to add the link to the page

    https://www.aepbooks.net:2012/index.php?main_page=page&id=3&org=gsa

  566. reformed media

    on December 18, 2012 at 7:09 pm

    ok, nevermind, I figured it out. I had to change the ID for each instance where it’s named “light” you can put “light1″ etc

  567. Adam

    on December 21, 2012 at 10:11 pm

    How do you make it popup automatically?

  568. anil

    on December 22, 2012 at 2:39 pm

    nice but you use in java script. so directly add style in js y u use in css here

  569. Ramiro

    on January 8, 2013 at 9:14 pm

    Forget the title, and the percentages!
    Very clean and easy to use.

    Thanks for sharing this. I implemented it, and adapted it for my applications.
    Great!

  570. AG

    on January 12, 2013 at 5:41 pm

    Awesome… clean.. minimalistic.
    Bene :-)

  571. A

    on February 1, 2013 at 8:33 am

    Thanks for CSS lightbox effect..

    &

    Thanks for Guys giving me the solution for blackoverlay & whitecontent problem (100% wrt content but not for screen)… it works fine for me..

    Solution – replace position:absolute with position:fixed for getting 100% height wrt content

  572. Mitch

    on February 12, 2013 at 2:27 am

    Ok, I know this is a really old post….hoping you are still monitoring…

    Is there anyway to change the position of the lightbox from a fixed location to based on where the user is on the page? I want it to display centered on the screen no matter where my visitor is on the page?

    Website page: http://www.green-panda.com/solutions.html and click on contact us near the bottom! Thank you!

  573. mohanraj

    on February 28, 2013 at 9:58 pm

    really nice coding.i have searched many codings.but it was clear and short.so sweet.lot of thanks

  574. anonymous

    on March 5, 2013 at 3:00 pm

    i replaced them w/ pictures. but how do you do multiple pictures w/ lightbox? when i click on the other picture it shows the same picture like the 1st one i clicked over and over again it doesn’t change even though they have different img src. the other pictures copies the first picture when clicked.

  575. mouni

    on March 15, 2013 at 12:06 pm

    i want the lightbox effect for another page sir….
    i dont want any jquerry and all…

    want the lightbox effect for another page when i click a button

  576. solution

    on March 24, 2013 at 12:54 pm

    Here is some light box code i offer it for you i am sure it will help you.
    Here is download link http://okayfiles.com/file/0Q884r

  577. MIchelle

    on April 6, 2013 at 10:27 pm

    Thanks for this!! Great job!

  578. Pemika

    on April 12, 2013 at 11:51 pm

    Thank you so much !!!! :)

  579. KedarLasane

    on April 23, 2013 at 5:48 pm

    I think [document.getElementById('light').style.display='block] is part of JavaScript.Isn’t it?

  580. gilgamesh

    on May 14, 2013 at 3:43 am

    this simple code is simply killing, even after 6 years.
    thank you so much!!! ( ’3′)<3<3<3
    really helped me

  581. Daniboyle

    on May 18, 2013 at 1:46 pm

    if you complete the code with jquery, you could have a nice fade effect:

    http://jsfiddle.net/kYREm/

  582. Katia

    on June 3, 2013 at 10:36 pm

    It’s a great solution. Thanks.
    But I have a problem, it runs ok in Firefox and Chrome, but it doesn’t work properly in a IE. Is there any other solutions for IE?

  583. Nute

    on June 7, 2013 at 8:02 pm

    I am making a gallery on my page and this would be perfect but I can only get the first picture to open into the lightbox everything else when click on only opens up the first picture. I do not know what I am doing wrong as I have never messed with Java before. Can anyone point me in the right direction, oh and a site where I can learn java better so I am a little more clear on whats going on?

  584. ubaid

    on June 11, 2013 at 11:31 am

    Ok basic thing is to use separately before or after the stuff you want to show as white area.

    Thanks, nice sharing.

  585. Andrei

    on June 13, 2013 at 12:49 pm

    Nice job, it helps me a lot. Great code here. I still have a problem:
    How can i add a effect to this, something like, elastif effect, or fade in, fade out, sometign, not just to pop out like this ?

    PLEASE HELP

  586. BGenth

    on June 19, 2013 at 5:09 pm

    This is very nice. I combined this with http://daneden.me/animate/ and was able to make a very slick pop up window. Thanks again.

  587. Lightbox (No Java) | Tyler Hall Web Design

    on July 1, 2013 at 9:54 pm

    [...] http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need… + July 1, 2013 by Tyler Blog [...]

  588. Lightbox (No Java) | Tyler Hall Web Design

    on July 1, 2013 at 9:54 pm

    [...] http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need… + July 1, 2013 by Tyler Blog [...]

  589. Sophie

    on July 2, 2013 at 10:42 am

    Thank you, just what I needed.

    Instead of using onclick=”" in the html, you can simply set a unique id=”samplebutton” on the links and in then put your javascript in a separate file using this code:

    document.getElementById(‘samplebutton’).onclick=function(){
    /* the code to show or hide the lightbox goes in here */
    }

  590. Lightboxes | Alice's Adventures in WebLand

    on July 2, 2013 at 12:41 pm

    [...] A very clear part of my plan was to include boxes on my ‘explore’ page, as a subsection to the page which would be interactive and informative. Originally, I wanted something that could be tabbed through for each three levels of the woodland ecosystem, however, this all proved very difficult. Lightboxes themselves are not separate pages with separate html sheets, they forms which make themselves invisible, unless they are cued by clicking certain links. This is the tutorial I used for my lightboxes. Please open up the link to to explore the code. http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need… . [...]

  591. Allan Hallett

    on July 31, 2013 at 9:59 pm

    Thankyou

  592. Alicia

    on August 2, 2013 at 6:05 pm

    HI There,

    I am having issues with the black overlay showing up. Any ideas? I’ve inserted the code into my web page just as described.

    thank you

  593. igor

    on August 11, 2013 at 7:40 pm

    Hi There,
    How to do that would main window not scrolling?

  594. jake

    on August 26, 2013 at 11:33 pm

    nothing like some shitty obtrusive js

  595. Mekey Salaria

    on September 5, 2013 at 3:30 pm

    Thank you boss!

    It was too easy to implement. Cheers ;)

  596. Manda

    on September 9, 2013 at 2:44 am

    Hello!

    Im trying to change the text-color of the close button underneath the lightbox? I’ve tried changing the color via numerous ways through both the white_content css style and basic html but its being stubborn and staying the color black. Could you tell me if theres a way to change it, I’m trying to get it white.

    Thanks!

  597. amazing

    on September 9, 2013 at 9:34 am

    Not only your technique DOES use javascript (hell, the *first* thing you gotta see on your example is a link pointing to javascript:void() !!) but it is not even usable with javascript turned off, which is what alternatives are exactly good at.

    Honestly I don’t see the point of this.

  598. TECKNOCK

    on September 11, 2013 at 12:38 am

    This is great !!! I’m using it in my website, very simple !!!

    There is a problem if the page has a scroll, the black layer won’t cover the full screen but this is easily fixed by changing the CSS for .black_overlay : “position: fixed” instead of “position: absolute”.

    It uses Javascript…. BUT WHO CARES !!!

  599. Alina

    on October 8, 2013 at 5:58 pm

    After going through this tutorial, I’m think we should get rid of all lightbox plugins. Isn’t it?

    Thanks for sharing a great tutorial.

  600. Avner

    on October 15, 2013 at 6:25 pm

    Hi,
    I am using a theme that has a light box feature already but it’s broken. The screen turns black all right, but so does the image! I’m trying to find a fix for that but so far with no luck. can this css do the trick? If so, where and how should I insert it? in which php file and where in the file? And maybe I should insert only the “white” part since the black is already there?

    Would appreciate any kind of help.

    Thanks!

  601. kuldip

    on October 30, 2013 at 10:24 am

    how use this code in my plugin ??

    i want to put this code like when any image click at that time my plugin is open in lightbox

  602. Sonja

    on November 5, 2013 at 7:07 pm

    Hi, I tried this on my webpage http://www.bestonlinekidsgames.com but it doesn’t work for more images than one. The images are displayed but in the light box only first image is displayed always. Does this work for you there?

  603. Sonja

    on November 5, 2013 at 8:39 pm

    I found what was my mistake. I used one id for all images :) Have a nice day everyone :)

  604. How to get a transparent background after scrolling down in light box?CopyQuery CopyQuery | Question & Answer Tool for your Technical Queries,CopyQuery, ejjuit, query, copyquery, copyquery.com, android doubt, ios question, sql query, sqlite query, nod

    on November 9, 2013 at 6:30 am

    [...] found a code for light box using a simple java script from here. The problem here is the transparent background is not coming when i scroll down the page.Here is [...]

  605. How to get a transparent background after scrolling down in light box? - Stack Answer

    on November 9, 2013 at 6:40 am

    [...] found a code for light box using a simple java script from here. The problem here is the transparent background is not coming when i scroll down the page.Here is [...]

  606. Open Iframe content links in new window | Technology & Programming

    on November 10, 2013 at 11:37 am

    [...] http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need… [...]

  607. John blue

    on November 15, 2013 at 6:29 pm

    why does this not work for me?
    it just goes to the next image without any lightbox

  608. axman13

    on November 18, 2013 at 3:03 pm

    … i reley dont wan to say this, but i have to now. this lightbox is so esey. i mean, all you do is write the css. thats it! how is this no javascript anyway? you cant contrail anything but what it says on the screen! what if i didnt want to write css? what apout javascript? all you can upgrade is stranth? this lightbox is crap! its not even a lightbox at all! i mean look at it! in what way is this supposed to be a LIGHTBOX if you can do quests and stuff? all you do is press one butten the entier time! explain to me! the athore coments al totol lies! is it supposed to be css only? i dont even know how this damn post got top google ranking, or a comments over 600! pepole think this review is worthles. go ahead! say it! i dont care! im just trying to make a point here! blam this piece of crap!!!! P.S the only reson im giving this a 1 is beacuase the css where pretty good. but thats it!

    http://www.youtube.com/watch?gl=BE&v=4Z2Z23SAFVA ;)

  609. Evandro

    on December 17, 2013 at 2:48 pm

    It’s awsome, thank you for save my job =D

  610. Bruno

    on January 28, 2014 at 2:41 pm

    Hello, I am trying to make the lightbox in a block in Magento e-commerce platform, you have any idea?

  611. Sam Gibson

    on February 26, 2014 at 8:24 pm

    FAIL!

    Next time you say “No JavaScript” perhaps try using NO JAVASCRIPT.

    Clown.

  612. Lucy

    on March 12, 2014 at 12:39 pm

    Awesome!!! good work!!! thanks for sharing

  613. Janine

    on March 26, 2014 at 10:50 pm

    Thank you very much.
    I really needed this.

  614. Steph

    on April 23, 2014 at 10:30 pm

    Thank you so much! This works great! Is there a way to make it close when I click outside of the lightbox?

  615. Emske

    on May 29, 2014 at 9:18 pm

    It’s good for websites when you want to increase website speed.

  616. Jesse

    on June 2, 2014 at 5:54 pm

    VERY misleading title. Here’s an article on my site that actually accomplishes this without Javascript. http://designcouch.com/home/why/2013/11/01/responsive-css3-lightbox-with-no-javascript/

  617. Cliff

    on August 1, 2014 at 7:56 pm

    DEFINITELY HAS JAVASCRIPT! TITLE MISSLEADING!!!

  618. Ashish K Arya

    on August 27, 2014 at 1:31 pm

    Nice Code end of the day i have successfully implement
    Thanks a lot

  619. Price Action

    on September 5, 2014 at 1:40 pm

    Pretty nice lightbox code Emanuele, thanks.

Thank you for the download!!

I hope you will find it useful and make something interesting out of it

To keep up to date with the blog, why don't you like my Facebook page and follow me on Twitter?

Want to learn more? Don't miss this:

Learn how to make a successful commercial Flash game from a real world example: get the fully commented source code of Globez, a Flash game played millions of times which generated a four figure income. Limited copies available.

Get it now

×