【CSS】透明度を変化させて画像一枚でロールオーバー
マウスホバー時、画像の透明度をcssのみで変化させてロールオーバーを実現する方法です。
CSS
a:hover img { opacity:0.7; filter:alpha(opacity=70);/*IE6,IE7*/ -ms-filter:"alpha(opacity=70)";/*IE8*/ zoom:1; }
opacityプロパティで画像の透明度を変化させます。0.7は不透明度70%ということです。
しかし、opacityはIEでは反映されません。IE用にfilterプロパティを追加します。さらにIE8の為に-ms-filterプロパティも追加します。最後にわからんちんのIEに言うことを聞かせる魔法の言葉zoom:1;を加えて完成です。
コメントを残す