It's kind of complicated. I'd rather have all the information at my disposal so I could work on it (an example, or your actual website, but here's the basic premise:
HTML:
1) A gallery is a list of images.
2) You'll need a JavaScript Suckerfish Hover code (look it up on Google). Internet Explorer (I think up to and including 7) doesn't allow you to hover non-links.
CSS:
1) A thumbnail is a cropped and shrunken version of a full size image.
2) Float all the list items to get them side-by-side.
3) Use an overflow: hidden; property-value to hide the cropped parts of the image.
4) Use a negative margin + width on the image and height on the list-item to determine it's cropped image size.
5) Use a width and height on the image itself to set its dimensions in respect to the original image.
6) A hover on each list-item will reveal the full image, by setting the width and height of the list-item and image to auto, and the image's margins to 0.
The two hardest things to calculate are the margins for step (4) and the width/height for step (5).
Please get back to me when you post more info =)
Edit: Also, you probably don't want dynamic rules in your style sheet where the dynamic effect causes the layout to resize itself. This has the visual effect of making "the layout skip", which looks bad to the end user.
It's probably a better idea to lead to a page that has the full photo instead, on click. But if you have a better idea that could be more worth it.
