Cross browser multi-page photo gallery

31st March 2006

For IE5.5, IE6, IE7, Opera 8, Firefox 1.5 etc..

5th October 2007

Simplified and updated to work in Safari PC

copyright © stu nicholls - CSS play


As promised the second version of my multi-page photo gallery

This one differs from the first in that the large images are displayed within the boundary of the drop down page rather than opening the image in a new window.

Just hover over the tabs to display a page of images. Hover over each image to see a 2x image and finally click the 2x image to show the 640 x 480 pixel version.

To close the large image just click anywhere off the image. An area has been provided at the bottom right of the drop down page if you want to keep the image set on the screen.

Note that I have left out any alt/title text, but this can be added to the large image if required. Adding to the smaller images can cause unexpected results as when the mouse goes over an alt/title text the :hover is lost and the window will close.

Because this one uses the :active/:focus state of the links then it will have a problem in Opera and Safari. These browsers require the mouse click to be held to retain the large image on the screen. Releasing the mouse click will reset the image to its 2x size. The latest Beta version of Opera has changed all this and it now acts the same as Firefox and IE.

With this photo gallery I have gone about as far as I can with my latest developments in css. It uses :hover, :active, :focus, two stages of enlargement, cross-browser drop down and finally my method of removing the :active borders in Internet Explorer.

Hope you think the effort was worth it ;o)

And a big thank you to the photographers at Stock.xchng for providing the photographs used in this demonstration.

  • Download The source code with the stylesheet in the head. You will, however, need to supply your own photographs.


Because of all the time and effort spent in producing this demonstration
I would ask that you respect my copyright.

  1. If you are using this on a personal web site then please add a link back to CSSplay and retain any copyright comment in the stylesheet.
    A donation to the 'Support CSSplay' fund would be appreciated.
  2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at} and in this case a donation to the 'Support CSSplay' fund is required.
  3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.

Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.

Free, practical CSS menus, layouts, and examples

Soft Geometry Creative Industries

Soft Geometry Creative Industries
is a music-based design company located in Bristol UK.
I create artwork for albums, singles, posters and t-shirts.
My work is influenced by punk and post-punk poster and flyer design,
lo-fi photocopy aesthetics,
Francis Bacon and Mark Rothko.

I can provide a start to finish service with my own art and photography, put together work from images provided by yourself, and collaborate on an idea.

Follow CSS play

Facebook   Twitter   Facebook Fan Page