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

画像にマウスを乗せたときに画像を薄くする。
これは、バナー広告にも適用されるのでリンクがあることを目立たせることが出来る。


cssの記述は以下の通り

/* マウスオーバーで画像半透明 */
a img {
  filter:alpha(opacity=100);
    -moz-opacity: 1;
    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を指定して背景を白にすると見えやすくなる。

Bloggerの場合は、マイブログのテンプレートからカスタマイズを選択する。
項目の一番下の、上級者向けからCSSを追加を選択後に、上記のCSSを追加する。

背景の色を変えたい場合は、上級者向けを選択後に、「画像」をクリックして背景色を選ぶ。
このとき、下にプレビューが表示されるが、ブログに適用を押さないと色の確認ができないので注意が必要。
スポンサーリンク
スポンサーリンク