CSSで画像にロールオーバーで半透明にしたい

このようにリンク画像にマウスポインタを置くと半透明になってリンクされている画像とそうでない画像とがわかりやすくなります。

これを自動化するのにCSSに以下のソースを追加するだけで完成します。

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

これだけで十分動作しますが、こちらの記事 にはプロフィールページのフリースペースとブログのフリープラグインにもタグを追加したほうがいいとありましたので、追加します。

<style type="text/css">a:hover img{filter: alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}</style>

数値はお好みで、背景がdark系の場合にクールに見えますが、light系だとインパクトは薄くなりますので、あまり透明度を強くしないほうがいいでしょう。参考にさせてもらったのはこちらのサイト