CSS Only Lightbox Effect Using :target | Grains of Sand

CSS3 Demos - Lightbox Effect Using :target

You can use CSS to create a Lightbox effect, without the need for javascript. This can be useful for images placed within paragraphs as well as for styling galleries. There are a few ways of achieving this, here I'm using the :target pseudo element.

What We're Aiming For

Click on the images to see the Lightbox effect.

Curabitur gravida faucibus feugiat. Phasellus dignissim hendrerit euismod. Nulla in sem eu turpis dictum consequat ac non eros. Ut quam leo, ornare a aliquet a, posuere egestas ligula. Aenean euismod, nulla pharetra pharetra vestibulum, nunc enim feugiat purus, vitae pretium nisi enim vel libero. Fusce id mauris dolor. Ut cursus placerat massa, ut tincidunt nisl malesuada id. Maecenas consectetur laoreet tincidunt. Aenean non est non augue sodales commodo a nec sapien.

Images from Stock.xchng - Old Town Street and Canal in Leiden.

Step By Step

Step One
Add the images and basic page styling

HTML

<a href="#image01" 
class="imgright" >
<img src="lightbox01-sml.jpg" alt="Slovenian Street" width="200" height="133" />
</a>
<a href="#" 
id="image01" 
class="lightbox" 
title="Slovenian Street">
<img src="assets/lightbox01.jpg" alt="Slovenian Street" width="600" height="400" />
</a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue est vel elit tempor a pellentesque dui consectetur. Morbi mattis varius lacus, in faucibus tortor viverra non. Cras accumsan suscipit pulvinar. Mauris venenatis volutpat leo, sit amet fringilla odio convallis ut. Donec sodales, nunc vel mattis aliquam, quam sapien lobortis leo, ut elementum nulla sapien non leo. Nullam vulputate, dui at cursus tincidunt, elit velit tincidunt justo, vitae bibendum arcu turpis sit amet nulla. Curabitur gravida faucibus feugiat. Phasellus dignissim hendrerit euismod. Nulla in sem eu turpis dictum consequat ac non eros. Ut quam leo, ornare a aliquet a, posuere egestas ligula. Aenean euismod, nulla pharetra pharetra vestibulum, nunc enim feugiat purus, vitae pretium nisi enim vel libero.
<a class="imgleft" href="#image02"><img src="assets/lightbox02-sml.jpg" alt="" width="200" height="133" /></a><a href="#finished" id="image02" class="lightbox" title="Slovenian Street"><img src="assets/lightbox02.jpg" alt="" width="600" height="400" /></a>Curabitur gravida faucibus feugiat. Phasellus dignissim hendrerit euismod. Nulla in sem eu turpis dictum consequat ac non eros. Ut quam leo, ornare a aliquet a, posuere egestas ligula. Aenean euismod, nulla pharetra pharetra vestibulum, nunc enim feugiat purus, vitae pretium nisi enim vel libero. Fusce id mauris dolor. Ut cursus placerat massa, ut tincidunt nisl malesuada id. Maecenas consectetur laoreet tincidunt. Aenean non est non augue sodales commodo a nec sapien.

CSS FOR THIS STEP

/***Reset the default margins, padding and borders to make the styling we add more consistent between browsers***/
html, body, p, a, img{ /*add any elements you use*/
margin: 0;
padding: 0;
border: 0;
}

Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue est vel elit tempor a pellentesque dui consectetur. Morbi mattis varius lacus, in faucibus tortor viverra non. Cras accumsan suscipit pulvinar. Mauris venenatis volutpat leo, sit amet fringilla odio convallis ut. Donec sodales, nunc vel mattis aliquam, quam sapien lobortis leo, ut elementum nulla sapien non leo. Nullam vulputate, dui at cursus tincidunt, elit velit tincidunt justo, vitae bibendum arcu turpis sit amet nulla. Curabitur gravida faucibus feugiat. Phasellus dignissim hendrerit euismod. Nulla in sem eu turpis dictum consequat ac non eros. Ut quam leo, ornare a aliquet a, posuere egestas ligula. Aenean euismod, nulla pharetra pharetra vestibulum, nunc enim feugiat purus, vitae pretium nisi enim vel libero.

Step Two
Hide the large images and style the thumbnails

HTML

same as step one

CSS FOR THIS STEP

/*** FIRST HIDE THE LARGE IMAGES***/
.lightbox img {
display:none;
}

/*** STYLE THE THUMBNAILS***/
img {
padding: 10px;
background: #fff;
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.4);
-moz-box-shadow: 0 0 4px rgba(0,0,0,.4);
box-shadow: 0 0 4px rgba(0,0,0,.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}

/*** POSITION THE THUMBNAILS***/
.imgleft{ /**placed in the left of the text with the text wrapped round**/
float:left;
margin:0 10px 10px 0;
}
.imgright{ /**placed in the right of the text with the text wrapped round**/
float:right;
margin:0 0 0 10px;
}

Result

Step Three
Display the large image as a pop-up when its thumbnail is clicked or in focus and darken the page behind it

HTML

same as step one

CSS FOR THIS STEP

/***DISPLAY THE LARGE IMAGE AS A POPUP***/
.lightbox:target img { /*see the support section below for info on :target*/
display: inline-block;
}

/***POSITION AND STYLE THE POPUP***/
.lightbox {
z-index: 9999; /*places the popup in front of the other content*/
position: fixed; /*prevents the image scrolling with the rest of the page*/
}
.lightbox img {
margin-top: 100px;
padding: 10px 10px 25px 10px;
/*give the popup a smoother effect using CSS transitions, this is measured in seconds - here I'm using .25 seconds*/
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out; /*change the speed by amending .25s to whatever suits you*/
}

/***CREATE & POSITION THE DARKENED PAGE BACKGROUND***/
.lightbox {
background: rgba(0,0,0,0.7); /*the colour of the darkened background, using rgba allows the background to be a little transparent*/
}
.lightbox:target {
width: auto; /* fills the entire width of the page, 100% would work as well*/
height: auto; /* fills the entire height of the page, 100% would work as well*/
top: 0;
right: 0;
bottom: 0;
left: 0;
}

/***FINALLY, ADD A CAPTION UNDER THE LARGE IMAGE***/
.lightbox {
font-family:'Bitter', sans-serif; /*Bitter is available from Google Webfonts*/
font-size:1.2em;
text-align: center;
}
a.lightbox{
color:#232323;
text-decoration:none;
font-size:1em;
}
a.lightbox:after{
content: attr(title); /*uses the content of the link's title attribute as the caption*/
display: block;
margin-top:-30px;
}

Result

click on the image to see the effect

Full Code For You To Copy And Paste

HTML

<a class="imgright" href="#image01"><img src="assets/lightbox01-sml.jpg" alt="" width="200" height="133" /></a><a href="#" id="image01" class="lightbox" title="Slovenian Street"><img src="assets/lightbox01.jpg" alt="" width="600" height="400" /></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue est vel elit tempor a pellentesque dui consectetur. Morbi mattis varius lacus, in faucibus tortor viverra non. Cras accumsan suscipit pulvinar. Mauris venenatis volutpat leo, sit amet fringilla odio convallis ut. Donec sodales, nunc vel mattis aliquam, quam sapien lobortis leo, ut elementum nulla sapien non leo. Nullam vulputate, dui at cursus tincidunt, elit velit tincidunt justo, vitae bibendum arcu turpis sit amet nulla.
<a class="imgleft" href="#image02"><img src="assets/lightbox02-sml.jpg" alt="" width="200" height="133" /></a><a href="#" id="image02" class="lightbox" title="Canal in Leiden"><img src="assets/lightbox02.jpg" alt="" width="600" height="400" /></a>Curabitur gravida faucibus feugiat. Phasellus dignissim hendrerit euismod. Nulla in sem eu turpis dictum consequat ac non eros. Ut quam leo, ornare a aliquet a, posuere egestas ligula. Aenean euismod, nulla pharetra pharetra vestibulum, nunc enim feugiat purus, vitae pretium nisi enim vel libero. Fusce id mauris dolor. Ut cursus placerat massa, ut tincidunt nisl malesuada id. Maecenas consectetur laoreet tincidunt. Aenean non est non augue sodales commodo a nec sapien.

CSS

html, body,p, a, img{
margin:0;
padding:0;
border:0;
}
.lightbox {
position: fixed;
left: 0;
top: 0;
z-index: 9999;
text-align: center;
background: rgba(0,0,0,0.7);
font-family:'Bitter', sans-serif;
font-size:1.2em;
}
img {
padding: 10px;
background: #fff;
-webkit-box-shadow: 0 0 4px rgba(0,0,0,.4);
-moz-box-shadow: 0 0 4px rgba(0,0,0,.4);
box-shadow: 0 0 4px rgba(0,0,0,.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.lightbox img {
display:none;
margin-top: 100px;
padding: 10px 10px 25px 10px !important;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
a.lightbox{
color:#232323;
text-decoration:none;
font-size:1em;
}
a.lightbox:after{
content: attr(title);
display: block;
margin-top:-30px;
}
.imgleft{
float:left;
margin:0 10px 10px 0;
}
.imgright{
float:right;
margin:0 0 0 10px;
}
.lightbox:target {
width: auto;
height: auto;
bottom: 0;
right: 0;
}
.lightbox:target img {
display:inline-block;
}

Support

Explanations Of The CSS3 Used In The Demo

z-index

z-index specifies the stack order of an element within the document. Elements with a higher z-index will appear infront of those with a lower z-index.
Note that it only works on positioned objects.

:target

:target is a pseudo element (in the same way as :before and :after) that is used to style the target of a hash in a url. For example, in the page http://www.yourpage.co.uk#attention the target would be attention and would be styled in the CSS using the selector #attention:target. I've created a quick example page to more easily explain how it work.

Browser Support

The demo works in all the latest browsers, including IE9. IE8 will require CSS3Pie to make border-radius and box-shadow work correctly.

Notes

This way of achieving a Lightbox effect does have some glitches, especially when compared to the more commonly used javascript Lightboxes, but it can be very useful for the occasional image placed within text (of course you can use it for full galleries if you like). One of the drawbacks for me is that you have to close each popup image before opening the next, whereas with javascript you can usually scroll through the images from within the popup - which is why I say it's more suitable to occasionally images than galleries. It also breaks the back button, in that it changes the URL in your address bar from www.yourpage.com to www.yourpage.com#bigimage.

More CSS3 Demos This Way