Create A Slick Image Portfolio Effect

I was recently browsing a few photography website and came across a quite slick way to display a small snippet of information for for an image gallery. Unfortunately, it was Flash based, so I attemtpted to mimick the using only xHTML and CSS.

The basic xHTML is as follows:

<ul class="gallery">
<div class="image_holder"><img src="images/1.png" alt="some image" /></div>
<div class="detail">



      <a class="more button" href="#detail_link">View More</a></div></li>

The HTML is simply an unordered list, with a detail div, absolutely positioned, that contains the popup information about that item. When a user hovers over an image the detail tab will be shown. To achieve this effect a simple bit of CSS is used: li:hover .detail {
   display: block;

There’s not a lot more to be honest – take a look at the result or download the source files.

The only downside is that due to the selectors used, the information divider fails to show in IE6.

Published by

Rob Allport

Web Developer based in Stoke-on-Trent Staffordshire Google+ - Twitter

One thought on “Create A Slick Image Portfolio Effect”

  1. That’s a very nice effect, I think it would work well for a full page of images – 100% wide. Can I use this effect without giving credit on my own site, as it’s more a of a corporate site and giving credit doesn’t look good :] :] Thanks, let me know

Leave a Reply

Your email address will not be published. Required fields are marked *