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.
- Each week the Creare Group produce video tutorials for SEO and tips and tricks for the web design industry.
- We offer nothing but the highest quality SEO, Social Media Optimisation And PPC services to businesses in London
- Register Domain Name
- web designers company providing number 1 services for website design and SEO
- IT Support Bristol
- Web Design
- Website Designers - Compare quotes from local website designers
- Top Website Design Company CWD.
Get the Perfect Website! - Web Design Birmingham - Expert web design, marketing and support
- UK's white label Web Design specialist
- Affordable Web Design from EU Design Studio
CSS play Testimonial
"The 
web site uses
CSS play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."
Damon Clark - Brandwidth