使用したテクニック
CSSでよく使うテクニックとして
”画像にマウスをのせると、その画像が半透明になる”というのがあります。
画像で作ったボタンやバナーのマウスオーバー時には通常、マウスオーバー専用の画像と通常のマウスアウト時の画像を作って
Javascriptで切り替えますが、それがめんどくさいときに使うテクニックです。
画像はバナー・ボタン１つにつき１種類ですみ、ある程度インタラクティブな挙動が実現できます。
例えば以下のcssでは
a.banner {
display:block;
}
a.banner:hover img {
display:block;
opacity:0.8;
-ms-filter: "alpha( opacity=80 )";
filter:alpha(opacity=80);
}
“banner”というクラス名でリンクされた画像にマウスをのせるとちょっと半透明になります。
発生した問題
ただこれをやってるとたまに陥る問題として
マウスオーバー時にレイアウトが崩れるという事がおこりました。
マウスオーバーすると隣接する要素が動いてしまうわけです。
画像のサイズもマージン設定も問題ないのになんで？って感じですが
よく原因はわかりませんが、opacityを使うとたまに起こるようです。
参考：opacityのマウスオンで画像が1pxズレるバグの解決方法
上記は少し現象としては違うのですが
解決策として有力なのは
backgroundを設定する。
display:inline-blockを設定する。
などです。
解決したソース
私の場合解決したコードは下記のようにinline-blockを設定したものでした。
a.banner {
display:block;
}
a.banner:hover img {
display:inline-block;
opacity:0.8;
-ms-filter: "alpha( opacity=80 )";
filter:alpha(opacity=80);
}