Notice: jetpack_enable_opengraph の使用はバージョン 2.0.3 から非推奨になっています! 代わりに jetpack_enable_open_graph を使ってください。 in /virtual/id696g/public_html/blog.696.jp/wp-includes/functions.php on line 3830

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

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

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

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

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

html

css

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

html

css

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

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

Comments
By | 2017-04-04T15:43:34+00:00 6月 24th, 2013|memo, txt|2 Comments

2 Comments

  1. […] 今回、参考にしたサイトがありますので こちらも参考にしてみてください。 画像にマウスオーバーした時、CSSで半透明の白を乗せる方法 […]

  2. […] 画像にマウスオーバーした時、CSSで半透明の白を乗せる方法 | 696graphic [BLOG… […]

コメントを残す

Shares