CSSで簡単マウスオーバー画像 簡単クッキング♪

今回は僕がTAするクラスも卒業制作がはじまったのでWEB1年生らしく。

知ってるかもしれないけど、意外と知らない人も多い1年生むけTIPS。

CSSで半透明というプロパティがあるのはご存知？CSS3.0なら簡単にできるようですが、CSS3.0の実用化は当分先なので、現状普及してるブラウザでもできる書き方を。

半透明にできるという事は背景が白色だと、マウスオーバー（:hover）した時に、ピカッとひかるようにできます。

書き方は簡単。画像をCSSで指定して以下のプロパティを書けばOK。

a:hover img{
    -ms-filter: "alpha( opacity=70 )"; /* IE8 */
    filter: alpha( opacity=70 ); /* IE6とIE7 */
    opacity:0.70; /* IE以外 */
}

これだけで、マウスオーバー画像効果が作れる。
↑の書き方だと全部の画像に効いてしまうので、クラスやIDで指定してください。
a#over_image:hover img {～～}みたいに。

JSを使わなくてもOK！画像を2つ作らなくてもOK！簡単便利！

※注意点として画像の後ろの背景が、黒だったり、模様があったりすると、上の画像が半透明になった時、逆に暗くなったり、模様が写りこんで汚くなります。
臨機応変に使ってくださいまし。