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);
	}

	.pressbox img	{
		opacity: 0;
		padding: 10px;
		background: #ffffff;
		margin-top: 100px;
		-webkit-box-shadow: 0px 0px 15px #444;
		-moz-box-shadow: 0px 0px 15px #444;	
		box-shadow: 0px 0px 15px #444;	
		-moz-transition: opacity .25s ease-in-out;
		-webkit-transition: opacity .25s ease-in-out;
		transition: opacity .25s ease-in-out;		
		}

.pressbox:target {
	width: auto;
	height: auto;
	bottom: 0;
	right: 0;
	}
	
	.pressbox:target img {
		opacity: 1;
		}

We’ve added an opacity transition so that our Pressbox will fade in once we click on the thumbnail. This will all work because of the :target pseudo class that will display the the element that uses the same ID that is referenced by the href parameter in the thumbnail’s anchor tag.

You can test it out below.

Remember that this will only work in the following browsers:

• Firefox 1.0+
• Safari 3.1+
• Opera 9.5+
• Chrome 2+