ロールオーバー画像をわざわざ作らずに、画像にマウスをあてたとき、白っぽくマウスオーバーするcss小技のメモ。

■サンプル

こんな感じ。

■ソース

<a href="#" class="imghover"><img src="image.jpg" /></a>

■cssソース

a.imghover:hover img {
filter:alpha(opacity=70);
opacity:0.7;
}

70や0.7は、50や0.5などに変えると、濃さが変わります。試してみてね。

filterはIE向け。opacityはFirefox等向けに書かれています。