CSS3 Lightbox

Today we want to show you how to create a neat lightbox effect using only CSS. The idea is to have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, we can make the large image appear in a fancy way.

CSS3Lightbox
View demo Download source

Today we want to show you how to create a neat lightbox effect using only CSS. The idea is to have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, we can make the large image appear in a fancy way.

With the help of the pseudo-class :target, we will be able to show the lightbox images and navigate through them.

The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License.

Please note that this will only work with browsers that support the :target pseudo class.

Let’s do it!

The Markup

We want to show a set of thumbnails, each one having a title that will appear on hover. When clicking on a thumbnail, we want to show a large version of the image in an overlay container that will make the background a bit more opaque. So, let’s use an unordered list where each list item will contain a thumbnail and a division for the overlay with the respective large version of the image:

<ul class="lb-album">
	<li>
		<a href="#image-1">
			<img src="images/thumbs/1.jpg" alt="image01">
			<span>Pointe</span>
		</a>
		<div class="lb-overlay" id="image-1">
			<img src="images/full/1.jpg" alt="image01" />
			<div>
				<h3>pointe <span>/point/</h3>
				<p>Dance performed on the tips of the toes</p>
				<a href="#image-10" class="lb-prev">Prev</a>
				<a href="#image-2" class="lb-next">Next</a>
			</div>
			<a href="#page" class="lb-close">x Close</a>
		</div>
	</li>
	<li> 
		<!-- ... --> 
	</li>
</ul>

CSS3Lightbox01

The anchor for the thumbnail will point to the element with the id image-1 which is the division with the class lb-overlay. In order to navigate through the images, we will add two link elements that point to the previous and next (large) image.
In order to “close” the lightbox, we will somply click on the link with the class lb-close which points to the element with the ID page which is our body.

Note that we only use a navigation in the last demo.

Let’s beautify this naked markup.

The CSS

I’ll omit the vendor prefixes for some of the new properties here in order not to bloat the tutorial. You can, of course, find them in the download files.

Let’s give some basic layout to our unordered list and the thumbnails:

.lb-album{
	width: 900px;
	margin: 0 auto;
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
.lb-album li{
	float: left;
	margin: 5px;
	position: relative;
}
.lb-album li > a,
.lb-album li > a img{
	display: block;
}
.lb-album li > a{
	width: 150px;
	height: 150px;
	position: relative;
	padding: 10px;
	background: #f1d2c2;
	box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
	border-radius: 4px;
}

The title for each thumbnail will be invisible and we’ll add a transitions for the opacity which will change to 1 once we hover over the thumbnail anchor. We’ll use a smooth radial gradient as background:

.lb-album li > a span{
	position: absolute;
	width: 150px;
	height: 150px;
	top: 10px;
	left: 10px;
	text-align: center;
	line-height: 150px;
	color: rgba(27,54,81,0.8);
	text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
	font-size: 24px;
	opacity: 0;
	background: 
		radial-gradient(
			center, 
			ellipse cover, 
			rgba(255,255,255,0.56) 0%,
			rgba(241,210,194,1) 100%
		);
	transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
	opacity: 1;
}

The overlay will have the same radial gradient and we’ll set its position to fixed, with zero height and width:

.lb-overlay{
	width: 0px;
	height: 0px;
	position: fixed;
	overflow: hidden;
	left: 0px;
	top: 0px;
	padding: 0px;
	z-index: 99;
	text-align: center;
	background: 
		radial-gradient(
			center, 
			ellipse cover, 
			rgba(255,255,255,0.56) 0%,
			rgba(241,210,194,1) 100%
		);
}

Once we click on a thumbnail, we’ll cover the whole screen with the overlay, but first, let’s take a look at the children.

Let’s style the division for the main title and the description:

.lb-overlay > div{
	position: relative;
	color: rgba(27,54,81,0.8);
	width: 550px;
	height: 80px;
	margin: 40px auto 0px auto;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
}
.lb-overlay div h3,
.lb-overlay div p{
	padding: 0px 20px;
	width: 200px;
	height: 60px;
}
.lb-overlay div h3{
	font-size: 36px;
	float: left;
	text-align: right;
	border-right: 1px solid rgba(27,54,81,0.4);
}
.lb-overlay div h3 span,
.lb-overlay div p{
	font-size: 16px;
	font-family: Constantia, Palatino, serif;
	font-style: italic;
}
.lb-overlay div h3 span{
	display: block;
	line-height: 6px;
}
.lb-overlay div p{
	font-size: 14px;
	text-align: left;
	float: left;
	width: 260px;
}

We’ll position the link element for closing the lightbox absolutely above the image:

.lb-overlay a.lb-close{
	background: rgba(27,54,81,0.8);
	z-index: 1001;
	color: #fff;
	position: absolute;
	top: 43px;
	left: 50%;
	font-size: 15px;
	line-height: 26px;
	text-align: center;
	width: 50px;
	height: 23px;
	overflow: hidden;
	margin-left: -25px;
	opacity: 0;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}

The image will have a maximum height of 100%. That’s one way of making the image somewhat reponsive and nicely fittin into the viewport (i.e our overlay). We’ll also add a transition for the opacity level. Once we “open” a large image, the opacity will get animated. We’ll see later how we can use an animation for the image.

.lb-overlay img{
	max-height: 100%;
	position: relative;
	opacity: 0;
	box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
	transition: opacity 0.5s linear;
}

Let’s style the navigation elements:

.lb-prev, .lb-next{
	text-indent: -9000px;
	position: absolute;
	top: -32px;
	width: 24px;
	height: 25px;
	left: 50%;
	opacity: 0.8;
}
.lb-prev:hover, .lb-next:hover{
	opacity: 1;
}
.lb-prev{
	margin-left: -30px;
	background: transparent url(../images/arrows.png) no-repeat top left;
}
.lb-next{
	margin-left: 6px;
	background: transparent url(../images/arrows.png) no-repeat top right;
}

CSS3Lightbox01

When we click on a thumbnail anchor, it will point to the respective large version of the image which is in the division with the class lb-overlay. So, in order to address this element we can use the pseudo class :target. We’ll add a padding to the overlay and “stretch it” over the whole viewport by setting the width and height to auto (it’s actually not needed explicitely) and set the right and bottom to 0px. Remember, we’ve already set the top and left before.

.lb-overlay:target {
	width: auto;
	height: auto;
	bottom: 0px;
	right: 0px;
	padding: 80px 100px 120px 100px;
}

Now we will also set the opacity of the image and the closing link to 1. The image will fade in, because we’ve set a transition:

.lb-overlay:target img,
.lb-overlay:target a.lb-close{
	opacity: 1;
}

And that’s all the style!
Let’s take a look at the two alternatives that we are using in demo 1 and demo 2.

In the first demo we make the image appear by using an animation that scales it up and increases it’s opacity value:

.lb-overlay:target img {
	animation: fadeInScale 1.2s ease-in-out;
}
@keyframes fadeInScale {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

In the second demo we’ll create the opposite effect, i.e. scale the image down:

.lb-overlay:target img {
	animation: scaleDown 1.2s ease-in-out;
}
@-webkit-keyframes scaleDown {
  0% { transform: scale(10,10); opacity: 0; }
  100% { transform: scale(1,1); opacity: 1; }
}

Demos

You will see that each browser performs quite differently when it comes to the transitions/animations. Adjusting duration, timing functions and delays, one can make the effects smoother, i.e. you can change the timing for Firefox only by changing the -moz- properties.

And that’s it! I hope you enjoyed this tutorial and find it inspiring!

View demo Download source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 63

Comments are closed.
  1. 4

    Well done! Works very smooth in Chrome! (not in IE8.0, but that probably is because of the :target pseudo class, right?)

    2 suggestions:
    – instead of the tiny browse-arrows at the bottom (demo 3), would it be possible to place them on the left and right side of the image – on hover? That way you you don’t have to move up and down when images are re-sized?
    – clicking at the background (ie, the original page) will close the image (instead of the tiny close button at the top).

  2. 5

    Very nice animation, though, there is a slight problem with the way it works.
    1st back button hit : It closes the photo
    2nd back button hit : it opens the last one.
    So in theory, back button should work only in the page and not on the gallery it self.

  3. 12

    Great! Even Backward/Forward browser action store slide zoomified popups. Smooth and elegant!

  4. 14

    Thank you all for your wonderful feedback and your suggestions!

    @Rodrigo, you are right! The thumbnails were floating “right”, so the order was wrong πŸ™‚ I fixed it now! Thanks a lot!

    Cheers, ML

  5. 17

    I really like being able to do things with just html and css.

    On this site: http://www.youbetternotstress.com/

    They are using lightbox effect but instead of going to a picture, they go to an html page. Would this also be possible to do with just html and css? I think this is one of the best sites I’ve ever seen but it’s looking so complex with all the additives needed to pull off the look.

  6. 20

    Excellent! The only little weak point is the back-button in the browser, which makes the last popup appear again…

Comments are closed.