画像のホバー上でタイトル/アルファタグを中央に表示

Question

画像の上にカーソルを置くと、画像の中央にタイトルやアルファベットが表示されます（フェードイン/フェードアウト）。画像も不透明度が低くなります。

私はかなり見てきましたが、私が見つけたほとんどのjavascriptプラグインはツールチップを作成していて、私が探しているものではありません。

ありがとうございます。

編集：言い換えれば、画像は単純なulリストに入れておく必要があります。余分なdivや各画像の周りに何かをラップする必要はありません。また、シャドウボックスなどにもrel attrを使用します。

Answer 1

あなたは

ul li img{ 
    position:relative; 
} 

.title{ 
    position:absolute; 
    z-index:1000; 
    top:50%; 
    bottom:50%; 
    right:50%; 
    left:50%; 
    width:100px; 
    border-radius:5px; 
    background:red; 
} 

（CSSこの

$('ul li img').hover(
    function(){ 
     $(this).css('opacity','.5'); 
     var a = $(this).attr('alt'); 
     $(this).parent().append('<div class="title">' + a + '</div>'); 
    }, 
    function(){ 
     $(this).css('opacity','1'); 
     $(this).next().remove('.title'); 
    } 
); 

（jQueryのは間違いなく改善することができるクイックや汚れ）

CSSのような何かができるも向上させることができました...しかし、これはあなたにアイデアを与える）

例：http://jsfiddle.net/dgKne/

Answer 2

これは、あなたがjQueryを使用してこの問題を解決するために近づくことができるかの単なる一般的な説明です：

1）divの中に画像を入れて、このdivのクラス（例与える：altHover）を
2）ホバーオン、最初のALTタグを選択し、変数に格納：var title = $("em").attr("title");
3）同じホバー機能で、その中にホバーのdivと印刷ALTタグ内に新しいdiv要素を作る：

$(".altHover").hover(
    function() { 
    $(this).append($("<div class='altText'>" + title +"</div>")); 
    }, 
    function() { 
    $(this).find(".altText").remove(); 
    } 
); 

Answer 3

あなたが持っているものILE使用することができますが、 divを追加する代わりに、y addClassを使用できます。ホバーブルオブジェクトとしてliを使用してください。

$("li.picture").hover(
    function(){ 
     $(".selected_result").removeClass("selected_result"); 
     $(this).addClass("selected_result"); 
    } 
); 

私はプロのjavascriptの人ではないですが、これはあなたのアイデアを与えるだろう。