WEBデザインテクニック|KLUTCHE

【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;を加えて完成です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です