Thursday, March 30th, 2006
Pure-CSS Image Gallery
Category: CSS, Programming
Just hover over the tabs to display a page of images. Hover over each image to see a 2x image and finally, on the Portraits and Landscapes, click the image to open a new window showing the 640 x 480 pixel version.
I am currently working on the MK.II version which, I hope, will allow the full size image to open in the same display area rather than a new window.
The gallery is a good reminder of the role CSS can play in dynamic web apps.
Related Content:
4.1 rating from 194 votes
[...] Hace unos dÃas os comentaba que estos efectos CSS eran increibles, ahora via Ajaxian veo este que se me pasó por alto comentar. Una galerÃa completamente hecha en CSS y XHMTL sin utilizar otras tecnologÃas, realmente increible, de esta forma te puedes asegurar que funciona para todos los navegadores, IE5.5, IE6, IE7 beta, Opera 8, Firefox 1.5 etc.. [...]
Huh. Very nice. But isn’t it very slow, because its loading ALL images at loading the page?
Interesting…but ajax related?
it is ajax related because it does not need ajax :P
That was quite impressive considering only CSS is used. I didn’t find it slow because it kept on loading images under the other tabs as I was moving my cursor over the selected image-set.
It’s beautifully done, but has one important limitation – the difference in size between the thumbnail and the zoomed picture is limited, since the zoomed picture covers other thumbnails.
To get a much larger photo, you would need to space the thumbnails very far apart, or have very large “thumbnails”.
it’s nice ~ some please may useful ^^
it’s nice ~some place may useful …..
Wow! That’s all I can say. I can’t belive it’s pure css.
Excellent use of CSS. Never thought CSS can be this effective.
yeah, it is a bit slow but considering it “css-only” its quite impressive.
[...] You may also consider looking at the entire Ajaxian CSS Category [...]
I agree, it can be somewhat obtrusive given the fact is loads all of the images. The more polite thing to do is to allow which images are downloaded to the end-user’s computer- by their selective preference. But, then again, it is pretty neat – especially if the images you have aren’t big or if they are/can be scaled down in size.
Good, but a little slow :-(
Very professional look!
We have a page where we provide our Artists with an AJAX Image Gallery example:
http://www.featurepics.com/Editorial/ajax-gallery.aspx
Could you please to leave comments pointing to this page as another way to design a gallery?
Hi, Im asking is it possible image content below the menu – Portraits, Landscapes…to be static, without hiding.