Simple CSS Lightbox

With this tutorial you will be able to create a lightbox effect like this with some simple web code.

This will be my first tutorial written with WP-Syntax, a syntax highlighting plug-in written by Ryan McGeary.

First you need to make sure the ol’ Javascript is enabled, so head on over to this page to have a wee check and change your settings if need be.

Now then, the first part I’ll show you is the CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#underlay{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#000;
	-moz-opacity:0.5;
	opacity:.50;
	filter:alpha(opacity=50);
}
#lightbox{
	display:none;
	position:absolute;
	top:100px;
	left:25%;
	width:50%;
	height:400px;
	background-color:#fff;
}

Lines 2 and 14: hides the elements by default (these will be overwritten later with Javascript).
Lines 3-7 and 15-19: sets the position and dimensions of the elements. Position should be either fixed or absolute. The other values can be either px (pixel), % (percentage) or em values.
Lines 9-11: sets 50% opacity in most browsers (if it doesn’t work in yours it will probably just show a matte black background when the lightbox shows up).

And the HTML:

1
2
3
4
5
6
<a href="javascript:void();" onclick="document.getElementById('underlay').style.display='block'; document.getElementById('lightbox').style.display='block';">Click Here</a>
<div id="underlay">
</div>
<div id="lightbox">
<a href="javascript:void();" onclick="document.getElementById('underlay').style.display='none'; document.getElementById('lightbox').style.display='none';">Close</a>
</div>

Lines 1 and 5: the Javascript links that will show and hide the lightbox in your browser. They find the id attributes of the two div elements and reset their display style.

Put both of these together, enclosing the CSS in a style tag, and you get something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style type="text/css">
#underlay{
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#000;
	-moz-opacity:0.5;
	opacity:.50;
	filter:alpha(opacity=50);
}
#lightbox{
	display:none;
	position:absolute;
	top:100px;
	left:25%;
	width:50%;
	height:400px;
	background-color:#fff;
}
</style>
<a href="javascript:void();" onclick="document.getElementById('underlay').style.display='block'; document.getElementById('lightbox').style.display='block';">Click Here</a>
<div id="underlay">
</div>
<div id="lightbox">
<a href="javascript:void();" onclick="document.getElementById('underlay').style.display='none'; document.getElementById('lightbox').style.display='none';">Close</a>
</div>

Other examples:

You can also close the box by clicking outside of it, instead of having to click on the link. View this page to see how it works.

This is a page with the position of lightbox set to absolute.
And this is one set to fixed.
Scroll down each page to see what happens.

If you are interested in seeing the code involved in making these pages, you can view their page source (usually by pressing Ctrl + U or from within the View menu).

Remember, the values inside the CSS are mostly just numbers, so have a play around with them and see what they do.


11 thoughts on “Simple CSS Lightbox

    1. You can change the content inside the "lightbox" DIV to whatever you like from the original "Close" link. The element is at the bottom of the script, and you’re looking to replace it with something like this:


      <div id="lightbox">
      <img src="/path/to/image.jpg" alt="Your Image" width="100" height="100" />
      </div>

  1. Gostei!
    Tinha uma galeria de imagens que usava jQuery, porém ela não habilitava o aumento da imagem selecionada.
    Adicionei o seu código e funcionou!!
    Parabéns pelo Post!!
    (São Paulo- Brazil)

    1. Translated from Portuguese to English with Google Translate:

      “I liked it!
      He had a gallery of images that used jQuery, but it did not empower the growth of the selected image.
      I added your code and it worked!
      Post Congratulations!
      (São Paulo-Brazil)”

      Glad you liked the post, thanks for stopping by! :)

  2. Hi there, finally a code that I could understand ;o)
    I´m new at this.
    Problem is though that we have a “slideshow” running on our “home” page and it comes through the Lightbox.
    Is there any way to prohibit this?

    The link for the Lightbox is in the lower right corner under Arngrím guitarist “About”.

    I have an Idea to send the Lightbox a little to the left to solv the problem, but it´s way nicer if it is in the center.

    Thank you for this simple code!

    Arngrim

  3. This is exactly what I want it!
    Sometimes too much animation script are made me tired.
    Thank you for share to simply code!

  4. Hi, first of all, great code! Exactly what i needed.

    However, I cant get this to work for multiple images/thumbnails.

    I have a page with 6 thumbnails but the only image that comes up when i click any thumbnail is the first one.

    Any solution?

  5. Hello, I am relatively new to web design and to save costs, I learned how to code my website myself. (www.kamicakes.com) I am not trying to code my gallery and came across this tutorial. The problem I am experiencing is when I add other images and click on the thumbnails of them, the large image that pops up is always of the first image. (I hope that makes sense) I cannot understand why for the life of me since it is specifying the proper image address. I hope you can clarify.

  6. I have seen many creative and very well designed light boxes and modal windows.
    Unfortunately theirs didn’t have what yours has got. Simplicity and the ability to work in internet explorer.
    Thank you.

  7. Modded to:
    #underlay{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.9);
    z-index:2000;
    }
    #lightbox{
    display:none;
    position:absolute;
    top:10%;
    left:10%;
    min-width:80%;
    width:auto;
    min-height:80%;
    height:auto;
    background-color:rgba(255,255,255,0.9);
    z-index:2001;
    }

    Cheers 😉

Comments are closed.