cssで簡単にできる半透明のマウスオーバー効果

HTML・CSS, WEB制作の小技や機能 | 2012.08.31

WEBでおなじみのマウスオーバーで画像が変わる機能。
（そういえば、iPadやスマホではマウスオーバーという概念自体ありませんが・・・）

この動きが大好きという方も多いのですが、制作サイドとしては場合によっては少々ややこしい仕掛けをしてある場合もあり、箇所が多いと結構な作業になる事があります。
また、一度に作業できない場合、あっちのマウスオーバーの効果は影がなくなるパターンで、こっちのマウスオーバーは色が薄くなるパターンで・・・などとまちまちになると、サイトの統一性が取れなくなってしまう事があります。

そんな時、画像の作成を必要とせずに、cssのみでできる半透明にするマウスオーバー効果の方法がこちらです。

a:hover img {
filter: alpha(opacity=80);
-moz-opacity:0.80;
opacity:0.80;
}

80という数字は透明の度合いなので、適当に変更させてみてください。
このスタイルを記述するだけで、全ての画像リンクが、マウスオーバーする時に半透明になります。

お手軽なので、ぜひお試しを！