Site map


A cross browser CSS photo gallery. Well, mildy angry probably.


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.


The 5 minute express gallery

If you have only five minutes to spare and want to see this gallery working straight away, use the express gallery template. Otherwise stay here and I'll explain in detail how to create the above css photo gallery.

Rotating php gallery

Once you've cracked the rather simple instructions for this css gallery, you can go for the Rotating php gallery, which changes images every hour. Best to get familiar with the css gallery first though.

A brief description

The gallery above is tableless and uses only css for positioning and opacity. It works by loading 24 images when the page is opened. The twelve thumbnail images are visible and the preview images are visible in the centre of the gallery when the relevent thumbnail is hovered over. When the thumbnail image is clicked on the link can open a new page with a larger image or link through to a website etc.


Go to the blank HTML 4.01 Strict template or the XHTML 1.0 Strict template, then copy and save the markup as shown.


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.

Image size and labelling

Thumbnail images

The thumbnails are 149×112px. For this gallery they are labelled "image01_thumb.gif" to "image12_thumb.gif".

Preview images

The preview images are 300×225px. For this gallery they are labelled "pre_image01.gif" to "pre_image12.gif". Obviously you can use gif, jpg, png or whatever you want.

If you want help with the image resizing & creation part, go to our GIMP tutorial pages.


The opaque effect was found on stu nicholls CSS PLaY experiments with css site, a very good site for innovative css.

I used the opaque effect he had used on a menu and adapted the idea for this photo gallery template. After a bit of messing around, I finally recently got it to work for our main photo galleries.


I have checked it out with the following browsers and given comments as to performance. I've also checked at 1280×1024, 1024×768 and 800×600 screen resolutions and they are ok too.


Other Mac based browsers

Also checked with Camino, Sunrise, & Shiira.

Internet Explorer 5 work around

I used a standalone version downloaded from 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 smile

Internet Explorer 5 spacer

For IE5 browsers delete these lines of html

<div class="no-thumb">&nbsp;<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.

ie5 spacer