CSSだけでマウスオーバーしたときに画像を白みがかったようにさせる

時々使うのに忘れていることが多いのでここにメモ。
(12/6/22 IE対応のためCSSの記述を追記しました)

<a href="hogehoge.html"><img src="image/hoge.jpg" class="overwhite" /></a>

a:hover img.overwhite{
	cursor:pointer;
	filter: alpha(opacity=60);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=60)";  /* ie 8 */
	-moz-opacity:0.6;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.6;              /* Safari 1.x */
	opacity:0.6;
	zoom:1;
}

白みがかった…というよりは、透明度を変えているだけなので
背景色によっては薄くなるようにしか見えないと思います。
そんなときはこっち↓の記述をどうぞ。

imgにつけていたclassを、Aタグに付け替えました。

<a href="hogehoge.html" class="overwhite"><img src="image/hoge.jpg" /></a>

a.overwhite{
	background-color:#ffffff;
	display:block;
}

a.overwhite:hover img{
	cursor:pointer;
	filter: alpha(opacity=60);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=60)";  /* ie 8 */
	-moz-opacity:0.6;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.6;              /* Safari 1.x */
	opacity:0.6;
	zoom:1;
}

Aタグに白背景を設定して、白っぽくなるように見せているだけです。
背景色をいろいろ変更してみるのもいいかもしれませんねー。