CSSPLAY

CSS DEMOS › A CSS3 Enhanced Photo Gallery

Date : 8th August 2010

For all modern browsers

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

Who needs javascript?

• Misty Landscape
• Ladybirds
• Dragonfly
• Cricket
• Green Lizard
• Busking in Sydney
• Singapore Mall
• Kookaburra
• Darling Harbour

Information

Absolutely NO javascript.

This Photo Gallery demo is for all browsers but some will see all of its features whilst others will just see the basic Photo Gallery.

The full list of features is:

• Images are rotated left and right a few degrees to give the appearance of a pin board with the images stuck on.
• Hovering these images will produce a smooth 'small' increase in size with a drop shadow.

• Clicking the image will produce a vertical large image in the center of the gallery with animation from the rotated position to the central upright position, a larger drop shadow, a fade-in 'close' graphic at the top right corner of the large image and finally a fade-in descriptive text beneath the image.

Browser support

Opera is the only browser that will see all these features and correctly interpret the mouse click to hold the image on screen.

Safari and Chrome will need the mouse button held down to keep the large image on screen, will see all the animation, rotation, drop shadows and close button.

Firefox will see the all the rotated images, drop shadows, close button and descriptive text, but will not see the animation.

IE8 will see the close button and the descriptive text, no rotation, no drop shadows and no animation.

IE6 and IE7 will see a single close button at the top right of the gallery instead of the top right of each large image and the descriptive text, no rotation, no drop shadows and no animation.

10th March 2011

Thanks to an email from Jim Vaughan, I now have a fix for the Safari and Chrome lack of :focus support after the mouse button is released. So I have now added this to the demo so that Safari and Chrome users can see it working as it should.

Copyright

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}cssplay.co.uk 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.

Terms and Conditions

This demonstration can be used subject to the following terms and conditions.

1. If you wish to use this demonstration in your website(s) please email me stu{at}cssplay.co.uk seeking permission.
2. You may NOT place this demonstration on another site for others to download.
3. You may NOT redistrubute or resell this demonstration.
4. Users agree not to remove or edit the credit notice within the stylesheet, or claim that this demonstration is their own.
5. Please see the Copyright statement above regarding the requirement for a support donation.