ma-san.org - 仙台でホームページ制作をするWebデザイナー

画像をロールオーバーさせるとき、ロールオーバー後の画像は明るくなるだけ、ってよくありますよね。そのくらいであればCSSで簡単に実現できるので、ご紹介します。これで簡単なロールオーバー後の画像を作る必要がなくなった！！

画像を透過させる、ただそれだけ

a:hover img{
filter: alpha(opacity=60);
-moz-opacity:0.6;
opacity:0.6;
}

上記の方法であれば、いちいちロールオーバー用の画像を用意しなくても、簡単に画像を明るくすることが可能です。（もちろん、透過させているので背景色が暗ければ、暗くなりますが）
Opacityの値が100（もしくは1）にすれば、透過はされません。0に近づけば近づくほど、透過されます。
注意点としては、透過PNGとの併用をしてしまうと、IEでの表示がおかしくなります。
マウスオンした際、透過すると同時にシャドウがかかったようになり、見栄えが悪くなりますので注意してください。