Thursday, November 30, 2006

Using CSS to Create a Photo Gallery

CSS Experiments on showcasing your photographs, as a single image or in a gallery format, and I found a very simple, easy-to-understand explanation of how to use CSS to create a photo gallery from Web Reference.

With this article I hope to show you how to produce a professional quality photograph gallery using nothing more than an unordered list of photographs and a Cascading Style Sheet (CSS). I will take you through the styling one step at a time and end up converting an unordered list of photographs into a professional photograph gallery. Each step will be thoroughly explained and will have an example page showing the effect of the additional styling so that you can see what to expect.

The technique presented puts the images in a HTML list and then uses CSS basics and the hover style to create a photo gallery so when you move your mouse over the thumbnail, the enlarged version of the image will appear in the showcase.

This is a great technique which worked on only a few browsers when I first started experimenting with it, but with most people upgraded to newer Internet browsers, and so many people switching to Firefox, this technique will work across most browsers now.

Enjoy!