I think image walls are a great way to display your work on a portfolio site. I think if you apply some effects to them and get a nice composition going, you can really make your work stand out. I was recently on the Vision Five Design Studio website and noticed they were utilizing a image wall for their work. I’ve seen several similar ones, and the one thing I’ve noticed is that they all use jQuery to achieve their affects. We’re going to create the same type of image wall using only HTML and CSS. It’s a fairly simple technique, requires no Javascript, and would make a nice addition to your website!

Check out the demo: Image Wall with CSS3

The HTML

So the first thing we’re going to do is create the markup for our wall. There’s a number of ways you could write this, but I always felt an unordered list was best suited for something like this. Semantically it looks nice, and it provides a nice container for the images. In the example below, I’ve included 3 <li> as an example, but obviously you would just add as many as you want on your wall. In the demo, you’ll notice we have a 3 x 3 grid so we have nine <li> total.

<ul>
    <li>
        <img src="/path/to/image" alt="image description" />
    </li>
    <li>
        <img src="/path/to/image" alt="image description" />
    </li>
    <li>
        <img src="/path/to/image" alt="image description" />
    </li>
</ul>   

The CSS

The CSS setup for this is actually fairly simple. First, we’ll decide how large we want our photo wall. For the demo, I used 200 x 200 images so our container is going to have a max width of about 600px wide. By using max-width, we can also make this image wall responsive.

#photo-wall{ 
    margin: 0 0 30px 0; 
    padding: 0; 
    max-width: 600px; 
    list-style: none; 
    overflow: hidden; 
}

Next we’ll setup the layout of our images. Since we want them in a grid, we’ll just float all the <li>. Again, we’ve set the width as a percentage to make the image wall responsive.

For the image inside the <li> we add display: block to get rid of the extra white space seen underneath it in some browsers, and we added borders to the left and bottom to add space between our images. Adding CSS transitions to the image will give us a sexy fade out effect, something that used to be done only with jQuery!

#photo-wall li{ 
    float: left; 
    width: 33.3333%; 
    overflow: hidden;
}

#photo-wall li img{ 
    display: block;     
    border-left: 1px solid transparent;
    border-bottom: 1px solid transparent; 
    -webkit-transition: opacity 0.5s ease-out;  /* Saf3.2+, Chrome */
       -moz-transition: opacity 0.5s ease-out;  /* FF4+ */
        -ms-transition: opacity 0.5s ease-out;  /* IE10 */
         -o-transition: opacity 0.5s ease-out;  /* Opera 10.5+ */
            transition: opacity 0.5s ease-out;
}

Note: It should be noted that images with the same height should be used. If not, your image wall will just look silly, and the CSS probably won’t work out as well.

The final part of our CSS is adding the hover functionality. What we’re going to do is fade out all the images when we hover over the grid, and then add an additional hover state on the list item. The latter will override the styles applied to the image from the first hover state because of specificity. I added the filter property so you at least get some of the effect in older versions of IE that don’t support opacity.

#photo-wall:hover img{ 
    filter: alpha(opacity=50); /* for older versions of IE */
    opacity: .5;
}

#photo-wall li:hover img{ 
    filter: alpha(opacity=100); /* for older versions of IE */
    opacity: 1; 
}

If you are utilizing conditional comments on your <html> tag for targeting IE (which you should) I would suggest removing the filter property from here and duplicating the CSS rule but prefix it with your IE class. So you might have something like this:

#photo-wall:hover img{ 
    opacity: .5;
}

#photo-wall li:hover img{ 
    opacity: 1; 
}

.oldie #photo-wall:hover img{ 
    filter: alpha(opacity=50);
}

.oldie #photo-wall li:hover img{ 
    filter: alpha(opacity=100);
}

Support

This technique is fairly well supported, it works perfectly in the latest versions of Chrome, Safari, and Firefox. IE misses out on the transitions, so if you’re okay with that (which you should) then you’re done! If not, you can provide a jQuery fallback using Modernizr. Here’s what that might look like:

if(!Modernizr.csstransitions){
    $("#photo-wall li").hover(function(){
        $(this).siblings().find("img").stop().fadeTo(400, .5);
    }, function(){
        $(this).siblings().find("img").stop().fadeTo(400, 1);
    });
}

That’s it! Hope you guys enjoyed this tutorial, would love to hear your feedback in the comments below! As always feel free to make suggestions on code improvements.

And don’t forget to check out the demo! Until next time.