透明度を使った画像のロールオーバー
手軽に画像をロールオーバーさせたい場合に便利な手法。
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独自のフィルタを使用します。
