Blogger Bloggerカスタマイズ WordPress WordPressカスタマイズ 画像

マウスオーバーで画像を半透明にする方法

画像にマウスを乗せたときに画像を薄くする。

これは、バナー広告にも適用されるのでリンクがあることを目立たせることが出来る。

cssの記述は以下の通り

/* マウスオーバーで画像半透明 */
a img {
filter:alpha(opacity=100);
-moz-opacity: 1;
p; opacity: 1;
}

a:hover img {
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}

と記述するだけでOK
それぞれ、IE、firefox、chromeなどに対応しているので、ブラウザで確認しながら変更していくこと。

a imgが何もしていないときの表示
a:hover imgがマウスを画像に乗せたときの表示
opacityの後の数字が透明度になっていて、大きくなるほど濃くなっていく。

また、背景に画像を使っていると、背景の画像が透けて見えることがあるので、注意が必要。

そんなときは、CSSでclassを指定して背景を白にすると見えやすくなる。

スポンサーリンク