Design Lunatic

CSS3 Lightbox

Today, we are going to make a CSS3 lightbox. They can be a great tool, but please, don’t overuse them. I hate those sites where a lightbox pops up asking you to register, or buy one of their products. It can turn a perfectly fine site into a really annoying experience.

Step 1: HTML

Here’s the html for the lightbox alone.

<div class="lightbox" id="lightbox1">
	<div class="lightbox-content">
	<div class="lightbox-close"><a href="#">close</a></div>
		<img src="images/test1.jpg" alt="test1">
		<h2>This is a header</h2>
		<div class="caption">
This is a caption, or whatever you want it to be.
		</div>
	</div>
</div>

So, we have a class of lightbox. This is the main container. We’re also going to use this div to create a semi-transparent black overlay onto the site, so everything but the lightbox is slightly faded out. Now, notice it also has an id of lightbox1. If we have multiple lightboxes on one page, we’ll use the ids to have control over which one is shown. Inside, we have a lightbox-content class. That will be the white box in the center of the page. There’s also a close link, which is very important.

Up next, we have some simple filler html for the main page.

<div id="container">
<div id="nav">
<a href="#lightbox1" class="button">
Lightbox
</a>
</div>
	Sagittis sociis egestas platea augue nec nunc montes, vel turpis sit nascetur phasellus a massa, vel parturient ultrices sit! Amet sed porttitor ut montes, in tortor enim, amet duis a scelerisque dis odio rhoncus in ac, amet a? Porttitor lacus, sociis adipiscing, vel et et, phasellus, a placerat tincidunt sit rhoncus, odio massa a, porttitor. Dapibus? Nisi sed sed parturient vut, in tristique, dictumst amet. Ut placerat porta! Duis lacus, in magna nec velit adipiscing, in rhoncus etiam, porta adipiscing mattis eu parturient turpis scelerisque porta, pulvinar risus aliquam nec natoque, ultricies quis, duis nisi augue, duis sociis etiam natoque velit magna, ultricies et, ac sit dapibus quis, mus velit, sit nascetur, placerat montes turpis montes ut, urna. Cum! Parturient.
</div>

Just fill it up with some Lorem Ipsum. There’s actually a very handy chrome extension for lorem ipsum: Lorem ipsum generator.

Awesome! Now we can move on to the CSS.

Step 2: CSS

This is actually extremely simple in its nature. There’s a div with “position:absolute”, which is normally hidden. Then, when the url has #lightbox[num] appended to it, the lightbox with the correstponding number shows. That’s what the id of lightbox1 is for. Also, don’t forget to include Eric Meyer’s CSS reset.

#lightbox1:target  {
visibility: visible;
-webkit-transition: opacity 500ms ease;
-moz-transition: opacity 500ms ease;
-o-transition: opacity 500ms ease;
transition: opacity 500ms ease;
opacity: 1;
}

.lightbox {
visibility:hidden;
opacity: 0;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.75);
}

Yup. That’s it. Here’s some styling that you’re going to need if you want your lightbox to look nice.

.lightbox-close {
float: right;
position: relative;
left: 15px;
bottom: 20px;
}

.lightbox-close a{
text-decoration: none;
font-size: 12px;
color: #595959;
}

.lightbox-close a:hover{
color: #797979;
}

.lightbox-close a:active{
color: #393939;
}

.lightbox-content {
padding: 30px;
width: 600px;
margin: 0 auto;
margin-top: 100px;
	
background: #ffffff;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

.lightbox-content img {
display: block;
margin: 0 auto;
}

.lightbox-content h2 {
font-size: 26px;
margin-top: 15px;
margin-bottom: 7px;
}

body {
background: url("bg.png");
font-family: arial;
font-size: 15px;
line-height: 25px;
color: #515151;
}

#container {
width: 600px;
margin: 0 auto;
padding-top: 50px;
text-indent: 15px;
}

#nav {
margin-left: -200px;
position: fixed;
}

Feel free to arrange the CSS in any way you like; I usually put the generic styling(html, body, #container) at the top of the CSS.

Well, that’s it. Like I said, it is extremely simple. This could actually be very useful in the near future, as more and more people move on to newer browsers. You could use this, and then use a javascript fallback solution if necessary. Honestly, if it wasn’t for Internet Explorer, this would probably be in use already.