Thursday, March 30th, 2006

Pure-CSS Image Gallery

Category: CSS, Programming

We’ve seen lots of Ajax image galleries and slideshows and, not surprisingly, they invariably make good use of Javascript. But Stu Nichols proves it doesn’t have to be that way – he’s built a functional image gallery in pure CSS (via Digg). His article points out it’s compatible with all the major browsers.

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.

Posted by Michael Mahemoff at 9:47 pm

4 rating from 200 votes


Comments feed TrackBack URI

[…] 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.. […]

Pingback by aNieto2K | De todo y para todos » Galería únicamente en CSS increible — March 30, 2006

Huh. Very nice. But isn’t it very slow, because its loading ALL images at loading the page?

Comment by Dave — March 31, 2006

Interesting…but ajax related?

Comment by Brian — March 31, 2006

it is ajax related because it does not need ajax :P

Comment by McNilz — March 31, 2006

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.

Comment by Amrit — March 31, 2006

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”.

Comment by Michael — March 31, 2006

it’s nice ~ some please may useful ^^

Comment by kuei — March 31, 2006

it’s nice ~some place may useful …..

Comment by kuei — March 31, 2006

Wow! That’s all I can say. I can’t belive it’s pure css.

Comment by Marko — March 31, 2006

Excellent use of CSS. Never thought CSS can be this effective.

Comment by CMS Comparison — May 3, 2006

yeah, it is a bit slow but considering it “css-only” its quite impressive.

Comment by creditcardinfo — May 4, 2006

[…] You may also consider looking at the entire Ajaxian CSS Category […]

Pingback by SunNimbus » Blog Archive » CSS Cornucopia — May 16, 2006

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.

Comment by litew8 — October 15, 2006

Good, but a little slow :-(

Comment by China Landscape — February 14, 2007

Very professional look!
We have a page where we provide our Artists with an AJAX Image Gallery example:

Could you please to leave comments pointing to this page as another way to design a gallery?

Comment by FP — February 28, 2007

Hi, Im asking is it possible image content below the menu – Portraits, Landscapes…to be static, without hiding.

Comment by zlossy — July 20, 2007

Leave a comment

You must be logged in to post a comment.