html - 画像にカーソルを合わせる

Question

pinterest.comや他のいくつかのウェブサイトで、画像の上にマウスを置くと、Facebookの共有またはツイッターの共有のサイン、コメントの数などが表示されるのを見てきました。私はグーグルで検索していて、マウスオーバーイベントを行うという答えを得ましたが、彼らは何か他のことをしていると思います。誰かが私にコードのヒントやサンプルを教えてもらえますか？画像にカーソルを合わせると、FacebookやTwitterで共有したり、画像を誰かにメールで送信したりできるようにしたいと思います。ありがとうございました

Answer 1

特定の効果が必要な場合は、サイトのコードを調べて、その効果を確認することをお勧めします。

始めるのに役立つ非常に基本的な例を次に示します。

<div class="wrap">
    <img src="http://placehold.it/350x150">
    <div class="info">
        Stuff here...
    </div>
</div>​

.wrap {
    width:350px;
    height:150px;
    position:relative;
}

.info {
    background:rgba(255, 0, 0, 0.2);
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
}

.wrap:hover .info {
    opacity:1;
}

jsfiddle