Result

jQuery

$(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');
    });
});

css

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;
}

html

<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>

via

Simplest jQuery Spotlight Effect Tutorial | Queness