ロールオーバー-opacity

このエントリーをはてなブックマークに追加

マウスオーバーの際に画像の輝度を上げ、ロールオーバーしたように見せる方法です。

XHTMLソース

<a href="http://blog.webcreativepark.net"><img src="./tor.gif" alt="to-R"/></a>

CSSソース

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

サンプルをみる

opacityはCSS3で追加される予定の透明度に関するプロパティになります。

ただし、IEを除くモダンブラウザでは先行実装している為、使用しても正常に動作します。

IEはfilterを使いalphaを変更することにより透明度を変更することが可能です。

この方法を使用するとマウスーオーバーの際に透明度が下がり輝度が上がったように見えるため、ロールオーバーが行われたように表示されます。

注意点としては、透明度が下がっている為、背景画像が設定されている場合などは背景画像が透けて見えてしまいます。

スポンサードリンク