CSSで出来る最も簡単な画像ロールオーバー（簡易版）

リンク付きの画像をオンマウスすると画像の色が変わったりする「ロールオーバー」。
やり方はたくさんあって、画像に「onmouseover="this.src='ロールオーバー画像'" onmouseout="this.src='元画像'"」を記述するとか、jQueryのプラグイン「jQuery_auto」を使うとか様々です。

今回ご紹介するのは、その中でも超簡易版で、ロールオーバー後の画像も用意する必要なし、CSSのみで出来る非常に簡単なマウスオーバー効果です。
ただ単に元の画像を薄くする（透過する）というエフェクトなので、シンプルですがカーソルを合わせて反応するまでの遅延もありません。

では、その記述方法です。
対象の画像のhover要素に対して、
{
filter: alpha(opacity=80);
opacity: 0.8;
}
を指定するのみ。
※「80」と「0.8」は透過をかける度合い。この場合、元画像の80%の濃さで描画されます。

例えば、<p class="r_over">内の<a>で囲ったimgに対してエフェクトをかけたい時は、
p.r_over a:hover img {
filter: alpha(opacity=80);
opacity: 0.8;
}
と指定するだけで、元の画像より20%薄く表示されます。

ちょっとしたロールオーバーとしては役立つかもしれませんね。