大阪ホームページ制作MKK WORKS

ものすごく簡単にロールオーバー風のリンクボタンが作れます。

サンプルページ

CSSのソースは下記だけです。

a:hover img{
opacity: 0.5;
filter: alpha(opacity=50);
}

要するにaタグ内のimgに対し、hover時に50%半透明化させて表示するだけの簡単なものですが
ソースも数行で済む為、意外と使えるテクニックです。

filterは対応ブラウザが少ないのでopacityでfirefoxなどをカバーしています。
数字を変えれば透明度を変更することが可能なので最適な数字で使用して下さい。

サンプルソース
a:hover img { opacity: 0.5; filter: alpha(opacity=50); }

簡単でしかも割とカッコイイとは言え、あまり推奨される方法ではないので
サンプルページや、ちょっとした事例を紹介するだけの
あまり細かく作りこまなくても支障の無いページに使うようにするのが無難だと思われます。