A CSS3 Enhanced Photo Gallery

8th August 2010

10th March 2011 - now fully working in Safari and Chrome

Who needs javascript?

copyright © stu nicholls - CSS play

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

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.



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

Follow CSS play


Facebook   Twitter   Facebook Fan Page