CSSで簡単マウスオーバー画像 簡単クッキング♪
2011/04/18
- 書いた人:
- futappa_staff
- カテゴリ:
- CSS
- 6,787 views
CSSのOpacityを使ってマウスオーバー画像を設定しましょう!超簡単!

今回は僕が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!簡単便利!
※注意点として画像の後ろの背景が、黒だったり、模様があったりすると、上の画像が半透明になった時、逆に暗くなったり、模様が写りこんで汚くなります。
臨機応変に使ってくださいまし。