A CSS3 Enhanced Photo Gallery
8th August 2010
10th March 2011 - now fully working in Safari and Chrome
- Misty Landscape
- Green Lizard
- Busking in Sydney
- Singapore Mall
- Darling Harbour
copyright © stu nicholls - CSS play
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.
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.
You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.
Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.
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.