うはーこれは素晴らしい。CSSの“a:hover”を使って行うボタンのロールオーバー効果は、一般的にはアウトマウス時とオンマウス時の2つの画像をPhotoshop等で作っておいて、それをCSSでスワップさせるんだけど、ここでは1つの画像だけで実現してます。“opacity”を使って透明度を変えるという手法で、これに対応していないIE対策には“filter”で対応しているようです。ただ透明度を下げているだけなので、背景色が白でない場合や、タイルパターンを使用している場合には期待する結果が得られないかもしれません。けどこれは忙しい時なんかにすんごく便利かも。下記にソース引用しておきます。リンク先にはサンプルもあります。

HTML

<a href="http://blog.webcreativepark.net"><img src="./tor.gif" alt="to-R"/></a>

CSS

a:hover img{
opacity:0.8;
filter: alpha(opacity=80);
}

CSSでロールオーバーもどき – to-R >>