We will use divs instead of ul list here. I have tested it with UL before, and it will work perfectly fine, you just have to style is with CSS. The caption for the thumbnail will be obtained by jQuery from the anchor Title.

2. CSS

CSS is pretty simple, if you’re using different image size, you might need to adjust the position of caption. Also, we are using a little bit of CSS3 here, we’re using drop shadow, so when you mouse over the item, you will able to see them in firefox, chrome and safari, maybe opera but definitely not internet explorer.

3. Javascript

ALright, here we come to the script that makes everything alive. The way it works is really simple, when we mouse over the item inside the #items, it will set the opacity of the siblings of the item to 0.1, add drop shadow effect and then display the caption. If the user left the #items block, everything is reset back to default

$(document).ready(function () {

//loop through all the children in #items //save title value to a span and then remove the value of the title to avoid tooltips $('#items .item').each(function () { title = $(this).attr('title'); $(this).append('' + title + ''); $(this).attr('title',''); });