Site map

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

CSS photo gallery - Hovering on thumbnail reveals it with no opacity and shows a preview photo with a short description in the centre of the gallery.

Image01 Image01Image01
Image02 Image02Image02
Image03 Image03Image03
Image04 Image04Image04
Image05 Image05Image05
 
 
Image06 Image06Image06
Image07 Image07Image07
 
 
Image08 Image08Image08
Image09 Image09Image09
Image10 Image10Image10
Image11 Image11Image11
Image12 Image12Image12
 

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.

The HTML

Go to the blank html template, 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.

Thumbnail image (image01_thumb.jpg)
thumbnail image

Preview image (pre_image01.jpg)
preview image

History

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

I kept the opaque effect 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.

Feedback

Any comments? Go to the CSS photo gallery template comments page.

Compatibility

I have checked it out with the following browser versions and given comments as to performance. I've also checked at 1280x1024, 1024x768 and 800x600 screen resolutions and they are ok too.

Firefox 1.5
Works ok.
 
Mozilla 1.7.12
Works ok, but a slow response time.
 
Netscape 8.1
Works ok.
 
Opera
It works in 9.0, but I think opacity isn't supported in lower versions. The gallery works ok though.
 
Internet Explorer 6
Works ok. Yeah really, it does! I was shocked too.
 
Safari
I have no idea if it works in Safari as I haven't got a Mac. I've checked with SafariTest and the layout looks ok. This is only a screenshot, so maybe someone could let me know if it works on the comments page.
 
Konqueror
Again I have no idea as I'm not running it. I've checked with browsershots and the structure looks ok. Again it's a static screenshot, so someone might like to let me know if the hover effect works on the comments page.
 
Internet Explorer 5
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 class="no-thumb" div.
I've used some 149x112px spacer images set to background colour which works fine, the images are commented out by default.
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

Thumbnail spacer image (ie5.gif)

ie5 spacer