rather than just list the photos floated down the page and have tex alongside - I thought about some sort of gallery. the next thing I knew I was knee deep in creating a new CSS file.

Here’s how it works.

We are effectively changing an unordered list. So we need to set that up first. We put our photos (12 in this case) into a list in the html - assigning each with a unique slide class and a common class. We also must place each image in between span tags. (this becomes important)

Now we turn to the CSS.

Here is the tricky part. We place all the photos within the span inside a 5px x 5px dot in the top left corner of the page. This means that without any hover, the photos will remain inside this dot.

Then we setup the thumbnail gallery.

The gallery places 12 thumbnail pictures in  5 rows down one side of the page. There are 2 thumbnails for portrait pictures and 3 for horizontal.They are placed inside a block display as background images for each photo.

We connect the thumbnails to the photos through giving them the same class.i.e. the first thumbnail is called class side a - and inside the html the first photo is given class slide a.

Now we give the gallery span a hover attribute - in this case its normal size 372px x 372px. this means that when we hover over a particular thumbnail its corresponding photo will cease being restricted to within a dot and will now take up a 372px x 372px space and be revealed in all its glory.  So the hover over the thumbnail activates the photo - taking it out of its hiding place within the dot.

Here is the finished product - the photos aren’t the ones I plan to use but you get the point.   http://www-student.it.uts.edu.au/~awall/wedding/gallery.html

I have to thank stu nicholls for this at http://www.webreference.com/programming/css_gallery