javascript - 画像ホバー - エフェクトの変更

Question

誰かがマウスを画像の上に置いたときに、実際に画像を変更したいと思います。

画像があるとしましょう：

<img src="image.png"/>

ホバーに次の効果を加えて変更したい：

• 画像はクリック可能である必要があるため、ユーザーを別のページにリダイレクトするリンクにする必要があります
• 画像の背景は黒っぽく、不透明にする必要があります
• 画像では、中央に別の画像が表示されるはずです

どうすればそれが可能ですか？

Answer 1

リンクを作成し、<a class="my-image">foo</a>css を使用してロールオーバー効果を得ることをお勧めします。CSS ロールオーバーのチュートリアルは、Google 検索で簡単に見つけることができます。このソリューションは、javascript を使用せずに達成できる最もエレガントで、セマンティックで、seo フレンドリーです。

http://css-tricks.com/snippets/css/basic-link-rollover-as-css-sprite/のコード例

a {
       display: block;
       background: url(sprite.png) no-repeat;
       height: 30px;
       width: 250px;
}

a:hover {
       background-position: 0 -30px;
}

Answer 2

あなたはこのようにすることができます：

<a class="superimage" href="http://yourlink.com"></a>

そしてCSS：

.superimage {
    background-image: url(superimage.jpg) no-repeat 0 0;
    display: block; //or inline-block
    height: (image height)px;
    width: (image width)px;
    opacity: 0.8;
}

.superimage:hover {
    background-image: url(superimageonhover.jpg) no-repeat 0 0;
    display: block; //or inline-block
    height: (image height)px;
    width: (image width)px;
}

もっと助けて？聞いてください