Create a CSS photo gallery in five minutes.
Express CSS photo gallery
Hovering on the opaque thumbnail reveals the image with no opacity and shows a preview photo with a short text description in the centre of the gallery. Clicking on the thumbnail links to the full size image.
Files to download
This template is tableless and uses only css for positioning and opacity. By saving the files below, you should have a gallery working in 5 minutes. You then only have to resize and insert your own images to get your own gallery up and running.
The reason I've used two images (one thumbnail & one preview) is so that you can literally get a photo gallery running in 5 minutes. If you want to see a working gallery with 12 different images and an explaination of how it works, go to our CSS Photo Gallery template and tutorial.
If you want help with the image resizing & creation part, go to our GIMP tutorial pages.
The HTML and XHTML
Go to the blank HTML 4.01 Strict template or the XHTML 1.0 Strict template, then copy and save the markup as shown.
The CSS
Copy the gallery css file and save as gallery.css in the same directory as the html template. For an explaination of the css there is a css help page with comments on what can be tweaked.
Thumbnail and preview images
The template will work with no images, but if you want to see something happening reasonably quickly, the images referenced in the template are the ones below. Copy them and save them in a directory called /images/ one level up from the gallery html page.
Thumbnail image (image01_thumb.gif)
Preview image (pre_image01.gif)
Internet Explorer 5 work around
I used a standalone version downloaded from evolt.org to check this out. It works, but has a slight shift to the left on photos 6 and 8 with the standard css.
Consequently I used four 149×112px transparent spacer images for the centre, which work fine.
It's a bodge I know, but life's too bloody short to waste time on a browser that only about 0.3% of our visitors use. Shoot me 
Internet Explorer 5 spacer
For IE5 browsers delete these lines of html
<div class="no-thumb"> <div>
and replace with the following html.
<div class="no-thumb"><img src="images/ie5.gif" alt="IE5 Spacer" width="149" height="112" /><div>
Then copy & save the transparent thumbnail spacer image (ie5.gif) below.
