透明度を使った画像のロールオーバー


手軽に画像をロールオーバーさせたい場合に便利な手法。
a:hover時に透明度を設定すると、ロールオーバー風に表現できます。

<a href="samle.html"><img src="sample.png" class="over" /></a>

 

.over:hover {
opacity:0.7;
filter: alpha(opacity=70); /*IE5~7適用*/
-ms-filter: "alpha( opacity=70 )"; /*IE8適用*/
}

 

opacityプロパティにて透明度の設定ができます。
なおIEではopacityプロパティに対応していないので、IE独自のフィルタを使用します。

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る