jQueryの写真ポップアップテキスト

Question

...

私は、サイト上のメンバーの写真を持っていると私はメンバーに関する画像の下部にテキスト情報のポップアップを持つようにしたい - 、場所を年齢を言います

写真をカバーする必要がありますが、画像を遮らないように不透明である必要があります。

これを行う方法に関するアドバイスはありますか？

歓迎

Answer 1

これを行うにはJavaScriptは必要ありません。 CSS：ホバー状態を使用すると、マウスが画像にホバーする情報を表示できます。 は、あなたがこのようなマークアップを持っていると言う：

<div class="image"> 
    <img src="" /> 
    <div class="overlay"> 
    Name: John 
    </div> 
</div> 

次に、あなたがこのようなCSSを書くことができます：それはでサポートされていないので、

.image{position:relative;} 
    .overlay{position:absolute; bottom:0; display:none;} 
    .overlay:hover{display:block;} 

は、すべてのブラウザで不透明度を持つためには、CSSの不透明度を使用しない方が良いでしょう古いブラウザ。アルファが1未満の単一のピクセルpngを使用します。