Using :target to Create a Lightbox Effect with CSS3

Posted In Web Development - By On Tuesday, February 7th, 2012 With 0 Comments

If you’ve messed around with CSS3 you have probably seen some of the new pseudo classes pop up here and there. An interesting one that I just started to use is :target. A full explanation of what it does can be found on the W3 site but for the purposes of this tutorial, we will be using it to create a Lightbox effect. I actually developed this for PressWork and so I decided to call it Pressbox.

First we need to create a thumbnail and surround it with an anchor tag.

<a href="#image1"><img src="http://yoursite.com/images/image1.jpg" alt="" /></a>

The href parameter is very important since it will be what links our thumbnail to our larger image. We will use the same name as the ID in our larger image like so:

<a href="#" id="image1" class="pressbox"><img src="http://yoursite.com/images/image1-big.jpg" alt=""></a>

The larger image needs a class that we can reference. I used pressbox but you can use whatever you want as long as you modify the CSS accordingly. Here is the CSS that will get everything working properly:

.pressbox {

width: 0;

height: 0;

position: fixed;

overflow: hidden;

left: 0;

top: 0;

z-index: 9999;

text-align: center;

background: rgba(0,0,0,0.7);

}

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>