CSS Photo Gallery

There are many ways to make a photo gallery. Some use javascript to pop up a larger image in the same or a different window. Some load a new page for every enlarged image. You could easily use an iframe, but since those are bad for accessibility, I stay away from iframes as much as possible. Ajax is good for photo galleries as you can see here, but I’ll save ajax for another day as it’s more advanced and requires javascript.

Today, I’ll show you how to create a photo gallery with nothing but pure xHTML and CSS.

Below is a screen shot from this page. When you hover on a thumbnail, an enlarged version of the image appears.

Actual Image Dimensions

For this exercise, you should use images that are 250px wide by 188px tall. After you learn the technique, feel free to play around with something other than that.
The xHTML

The xHTML for this is simple:

May 17, 2009 Note: I modified the xHTML a little, because IE6 will not enlarge images when they’re hovered on. Please see this comment below for an easy workaround.

Frozen Lake
Sunrise
Fountain
Peacock
Boat
Sunset
Neon Grill
Old Print Shop

Here, we have nothing but images nested inside anchor links, and all of that is surrounded by one that I gave the id of “gallery.” You can name it anything you want, but the CSS has to agree with it.

The only reason we use links here at all is because some browsers require them in order to get the hover effect. If every browser was standards-compliant, we could do away with the links completely. But unfortunately, the most widely used browser out there is still far from standards-compliant.

Before closing the #gallery div, I added a
with the inline CSS of clear:both; because we’ll be floating the images. Without clearing those floats, the containing #gallery div wouldn’t extend past the last row of images, or any of the images for that matter.

Now for the CSS. This could be done by absolutely positioning each image, but it would take a lot more time and energy to position each one, then reposition each one every time you want to add, remove, or rearrange them. But when floating each one, you can easily add, remove, or rearrange images simply by adding or removing one line of code, or replacing an image url and its corresponding alt and title attributes.
Removing Image Borders

Since each image will be a link, they will have borders unless you remove them. This can easily be done with one line in your CSS:

img { border: 0; }

Or, you may decide to leave the borders in. I generally remove image borders from all my pages whether they have a photo gallery or not, so the CSS attributes I define here will assume the images start off with no borders.
The Containing

If you want to give your gallery a fixed width like I did, you’ll first need to determine how many columns of images you want, how wide you want your thumbnails to be, how big you want the margins between them to be, how wide you want any borders and/or padding you’ll have on those images, and add all those measurements up to determine the width of your containing . I opted for four columns of 100px wide thumbnails, 10px margins between thumbnails, and 1px borders around the thumbnails on this page, so a 480px wide gallery container works well.

gallery {

width: 480px;

}

You may also want enough margin above and below your gallery container to clear any other content that is on your page, and to center that container within its available area. Here, I opted for 45px top and bottom margins and centering the container.

gallery {

width: 480px; 
margin: 45px auto;

}

You may also want to give that containing div to have its own background color.

gallery {

width: 480px; 
margin: 45px auto; 
background: #ccc;

}

You may also want to add padding to that containing div so the outer part of the resulting frame isn’t half the width of the margins between images.

gallery {

width: 480px; 
margin: 45px auto; 
background: #ccc; 
padding: 5px;

}

These are just a few suggestions, and how you style it is up to you.

Next, we need to set up the links that surround the thumbnail images…