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">
	<li>
<div class="image_holder"><img src="images/1.png" alt="some image" /></div>
<div class="detail">

ImageTitle

{YOUR SNIPPET TEXT}

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

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:

ul.gallery 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.