Web Design Blog

This is where we store some of our Web Development thoughts, tips and tricks, just because we like to share.

Pure CSS Image Gallery

It’s a simple CSS image gallery- no Javascript or any other scripting language is required for the feature to work. I had someone ask me how I did it, so I thought I would share the code.

Demo of the CSS gallery

It’s simple, clean and affective.

CSS Image Gallery Code

Download

Any probs? Let me know. I’m not offering full-support on this feature, but if you have any queries, i’ll do my best to assist.

Note

The images DO NOT hold when you focus on a thumbnail using WebKit based browsers such as Google Chrome and Safari. In this case, the larger images display only on hover.

However, the large images do hold in other browsers such as Internet Explorer and Firefox.

30 Sep 2008 / 3 Comments / CSS Tips & Tricks / by Maruf

3 Comments

  1. Gary Bailey
    10/03/2009
    1

    This Gallery doesnt work in very well in IE6 either.

  2. Pablo
    10/05/2009
    2

    Hello, Great css code. I have a doubt. when I click at any pic to enlarge, the site jumps at top. Is there ather alternative code to resolve that? Thanks in advence!
    Best regards from Argentina
    Pablo

  3. 19/02/2011
    3

    This won’t work from Chrome web browser to. When I click the image2 the image changes, but when I unlick it is back to image1. It should be image2, until I click image1 again.

    Thanks,

Leave a Reply

© 2012 BrightCherry :)