Javascript-free image gallery

5thirtyone image gallery portfolio

After having grown tiresome of the flash solution which I had made use of for quick gallery previews in the portfolio, I decided to return to the basics with a CSS based image gallery. Plain-vanilla CSS using relative & absolute positioning to achieve a clean scriptless gallery.

For the following tutorial, we’ll construct a simple two image model using two thumbnail images, and their respective full image previews:

<div id="image_gallery">
<ul id="gallery_thumbs">
<li><a class="thumb" href="#tb"><img src="/img/thmb.gif" alt="thmb" /><span><img src="/img/lrg1.gif" alt="prvw" /></span></a></li>
<li><a class="thumb" href="#tb"><img src="/img/thmb.gif" alt="thmb" /><span><img src="/img/lrg2.gif" alt="prvw" /></span></a></li>
</ul>
</div>

Using the above structure, we now have a gallery container designated by #image_gallery, and a basic unordered list with the thumbnails and associated full previews wrapped with <span> tags to hide using CSS.

#image_gallery {
position: relative;
overflow: hidden;
}
ul#gallery_thumbs {
list-style: none;
margin: 0;
padding: 0;
}
#gallery_thumbs li {
background: none;
display: inline;
}
.thumb img { /* styles thumbnail previews */
background: #fff;
padding: 2px;
border: 1px solid #ddd;
}
.thumb:hover img {
background-color: transparent;
}
.thumb span { /* hides large previews */
visibility: hidden;
position: absolute;
}
.thumb span img { /* styles large previews */
background: #fff;
padding: 2px;
border: 1px solid #ddd;
}
.thumb:hover span { /* displays preview while hovering over thumb */
visibility: visible;
top: 80px; /* absolute positioning to control where previews are displayed */
left: 0;
z-index: 100;
}

Now that we have the basic HTML & CSS, we can now experiment with styling a gallery to match.

Discuss - 22 Comments

  1. Andy says:

    Am I the only person that isn’t working for? The folio section is displaying both the thumbnail and the picture, and I’m using Firefox in OSX …

  2. drekwon says:

    Super stuff. Need to test this asap.

  3. Derek says:

    [quote comment=”5413″]Am I the only person that isn’t working for? The folio section is displaying both the thumbnail and the picture, and I’m using Firefox in OSX …[/quote]

    That’s strange. Looks to be OK on my end with Firefix 1.5, Safari 2, Opera 9 (somewhat buggy displaying other images with the smallest mouse gesture), and IE 7 (IE 6 will be updated via software updates – does not understand the thumb:hover). I just hope I write the tutorial to match the actual gallery 😉 Comment back and let me know what version you’re using.

  4. Zach says:

    IE6 users could add a separate class, such as “.spanHover”. Then add the following to each span:

    onMouseOver=”javascript:this.className=’spanHover’;”

    Kinda defeats the purpose of doing without javascript, I know. But, it’s an easy fix for IE6 users.

  5. Derek says:

    Simple fix. We all know that the time is near that Windows users the world over will begin using IE 7 thanks to the high priority update that will go out through Windows Software Updater. Oh what a happy week that will be as sites show their IE 7 faults.

  6. Brendan says:

    IE6 will be around for a while in the corporate space (sadly) however most users of XP will have IE7 thrust upon them as an update (as Derek mentions).

    IE7 has been around for quite some time now in the various builds that have either leaked or been made public, however I’m sure a large number of folks are going to get caught out with non IE7 friendly sites. 🙂

    A more important note, I believe you’ve found a simple yet elegant way of using CSS to make a basic gallery. The greatest thing? No javascript, so it will work in virtually anything. 🙂

  7. Wow, sweet stuff, this is going to be useful for my portfolio (when I get one…).

  8. Brandon says:

    I haven’t visited your site in a while but just noticed this article. I actually made something quite similar on my myspace account a few months back. Its on my blog page which I covered up and placed a photo gallery on. You can find it here.

    I actually was inspired to create it after I downloaded your lime green overlay a while back. Thanks for planting seeds of inspiration 🙂

  9. Brandon says:

    So…I guess what I’m getting at is what do you think about it?

  10. Derek says:

    Looks good. Reminds me of my two year tenure at Washington State. Good times for sure.

  11. Derek says:

    Fixed that little typo. And for the record, there are not scripts involved. As far as I know, size does not effect whether or not the larger preview is shown. I managed to display 450px wide large images when the thumb was hovered over.

  12. Derek says:

    It looks to be working ok with the first image having a larger preview on rollover. You mis-linked your second rollover image.

  13. tolga says:

    hi there

    love your template, will modify and update soon

    just a bug

    .thumb:hover span { /* displays preview while hovering over thumb */
    visibility: visible;
    top: 80xp; /* absolute positioning to control where previews are displayed */
    left: 0;
    z-index: 100;
    }

    top: 80xp; should be
    top: 80px;

    🙂 was goin mad.

    and is this script dependant on the size of the images? somehow we could’nt get it working

  14. tolga says:

    geez that was fast 🙂 appreciated

    however there’s something working improper with what i have been trying..
    http://www.braininpain.com/blog/html/gallery.html

    i ain’t a coder yb the way, just designer developing my coding skills…

    is there an actual working example on this menu? any url?

    thanks in advance.

  15. tolga says:

    hmm
    why it happens to be not working here i wonder.

    firefox 2.0.0.2 with a ppc emac(runnin 10.4.8)
    and just asked for a pc user to check too..says don’t work

    any suggestions?

    (sorry to interrupt and thanks alot for your help and effort)

    ¿ : /

  16. Jim says:

    Am I going blind? I can’t see the live example anywhere…

  17. aaa says:

    could this be used on myspace

  18. Derek says:

    There is no Javascript so I don’t see why something like this couldn’t be used on MySpace.

  19. stylemo says:

    I think this is cool but I sure hope there’s a demo page where we can view how it works. 🙂

  20. Steve says:

    Thanks for this, been looking for a nice simple gallery i can use to display a few pics and this works a treat. Cheers