この記事は2013年6月24日に書かれた記事です。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

画像にマウスオーバーした時、CSSで半透明の白を乗せる方法

画像にリンクしてマウスオーバーした時に、CSSで画像に半透明の白を重ねたいなーと思い色々と試してみました。
以下がそのサンプルですが、実際には半透明の白を重ねているわけではなく、画像の透明度を変えて表現しています。

背景が白だと、透明度変えるだけなのでいいですね。

html

css

で。背景が白の場合は↑の書き方でいいのですが、背景が白でない場合は画像の透明度を変えても半透明の白が乗ったようにならないので、
aタグにクラスを付けて、背景に白を設定します。

html

css

ここで大事なのがaタグのCSSに設定してる display:block; 。
これが無いと画像サイズ一杯に指定した背景の白が広がりません。

ということで、サンプルがこちらです。

Comments

「画像にマウスオーバーした時、CSSで半透明の白を乗せる方法」への2件のフィードバック

コメントを残す