Mobile Friendly Website


Doing it with style

CSS DEMOSCross browser multi-page photo gallery

Date : 31st March 2006

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.


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 retain the copyright comment in the stylesheet.
    A support donation is now required for this demonstration.
  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 again a support donation 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.


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page