with Lorelle and Brent VanFossen

Using CSS to Create a Photo Gallery

I have quite a few examples in my 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 , this technique will work across most browsers now.

Enjoy!

Post a Comment

Your email is kept private. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>