これは使える！マウスを画像の上に持ってくると明るくなる処理をCSSだけで実装。

画像の上にボタンを持ってくると画像の色が変わるようなページがあります。
マウスがフォーカスしている画像が明るくなると、今どこを選んでいるのかがわかりやすくなってユーザーにとても親切です。
デザイン的にもマウスにあわせて画像が明るくなるとかっこいいですね。
そんなマウスオーバーの処理をCSS（スタイルシート）だけで簡単にやってしまう方法を紹介します。

普通、画像にマウスを合わせて明るく目立たせる場合は、
通常状態の画像とマウスを合わせたときの画像の２種類を用意して切り替えるのですが、
それが面倒くさいこともありますよね。
単純に明るくしたいだけであれば今回の方法が簡単で便利です。

CSS（スタイルシート）には透明度を指定する方法があります。
背景が白い場合は、画像を少し透過するだけで背景の白い色が浮かんで明るくなります。
ここではaタグに括られたimgタグに対して適用してみます。

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

※2010/12/10追記
　filter:alphaはIE対応。-moz-opacityはNetscapeNavigator対応。-khtml-opacityはSafariの古いバージョンに対応するためです。


例えば僕の大阪で経営しているホームページ制作会社のサイトの
コンテンツページの左側にあるtwitterのバナーはこのコードを使っています。

実際のホームページはこちら

でも、このままでは背景が暗いサイトではマウスを合わせると暗くなるという現象になってしまうので。
背景が暗いサイトでは、img要素の背景にあたるa要素の背景を白くしています。
※width, heightのサイズは各自設定してください

a{
background-color:#FFFFFF;
display:block;
height:125px;
width:125px;
}

例えばお客さんのホームページでこのコードを使っています。
千林のアメリカンカジュアルショップJAMN

画像を２枚用意しなくていいのでとても便利で重宝しています。
ぜひ、みなさんも使ってみてください。