Css photo zoom gallery

I’m trying to create a simple webpage that displays thumbnail photos (all the same size). When each photo is rolled over it would enlarge (some horizontal, some vertical).

This sort of illustrates what I’m looking for—only I would display up to 50 images per page.

The code looks kind of old and complex. It needs to be very easy to add to or update. I’m hoping there is an elegant way to do this with css only. Can anyone point me in the right direction?

Any help would be much appreciated.

Stu has a load of simple image galleries here.

There are many other ones about so you can take your pic. :slight_smile:

In the end it’s just basically a list of thumbnails and on hover you reveal a hidden image. If the images are of high quality and you are having 50 a page then you may prefer a javascript version that only grabs the image when needed otherwise the visitor has to wait for all images to load.

Thank you! I’m exploring all my options.

Paul, thanks for the link to Stu’s site. I’ve been keeping half an eye open for a dirt-simple CSS-driven thumbnail gallery display; a client made some noise about wanting something like that a couple of weeks ago. If she decides she wants it, this one’s a good choice. Since she only wants a half-dozen or so photos rendered, I didn’t want a big clunky JS solution. Tide, since you’re looking to render ~50 images, Stu’s solution might not be so hot for your needs.

I don’t usually think of Stu’s work as “simple” but he sometimes drops some really simple stuff in with his complicated (I’d say often overly complicated if I could code half as well as he can) demos. Good catch.

Also worth noting that Stu has a lot of photo galleries up: http://www.cssplay.co.uk/menu/

including this snazzy CSS-only “lightbox” http://www.cssplay.co.uk/menu/lightbox-hover.html