Thursday, March 30th, 2006

Pure-CSS Image Gallery

Category: CSS, Programming

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

Related Content:

Posted by Michael Mahemoff at 9:47 pm

4 rating from 199 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.