Edit in JSFiddle

$(document).ready(function () {
 
    //title属性を探してspan内に放り込む
    $('#items .item').each(function () {
        title = $(this).attr('title');
        $(this).append('<span class="caption">' + title + '</span>');   
        $(this).attr('title','');
    });
 
    $('#items .item').hover(
        function () {
            //ホバー時に全てのアイテムを透過処理
            $(this).siblings().css({'opacity': '0.1'}); 
            //マウスが乗っかってるのだけ透過を戻してclass="effect"を追加
            $(this).css({'opacity': '1.0'}).addClass('effect');
            //さっきのspanをフェードイン
            $(this).children('.caption').fadeIn();    
        },
        function () {
            //spanを隠す
            $(this).children('.caption').fadeOut();        
        }
    );
    $('#items').mouseleave(function () {
        //マウスが外れたらリセットする
        $(this).children().fadeTo('100', '1.0').removeClass('effect');      
    });
});

body {
    font-family:arial;
    margin-top:70px;
}
         
img {border:none;}
     
#items a {
    text-decoration:none;
    color:#666;  
}
         
#items {
    width:786px;
    margin:0 auto;
}
 
#items .item {
    display:block;
    width:190px;
    height:120px;
    border:1px solid #ddd;  
    float:left;
    position:relative;
}
         
#items .item .caption { 
    position:absolute;
    top:80px;
    left:2px;
    padding:3px;
    font-size:10px;
    color:#fff;
    width:180px;
    display:none;
    background:#666;
}
                 
.clear {
    clear:both; 
}
     

<div id="items">
    <a class="item" href="javascript:void(0);" title="title01">Item01</a>
    <a class="item" href="javascript:void(0);" title="title02">Item02</a>
    <a class="item" href="javascript:void(0);" title="title03">Item03</a>
    <a class="item" href="javascript:void(0);" title="title04">Item04</a>
</div>    
<div class="clear"></div>