• Facebook
  • Twitter
  • RSS

月別

コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン

2011/04/18

書いた人:
futappa_staff
カテゴリ:
CSS
2,912 views

CSSのOpacityを使ってマウスオーバー画像を設定しましょう!超簡単!

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


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

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

 

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

 

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

 

hoverbtn

書き方は簡単。画像を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!簡単便利!

 

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


この記事を読んだ人はこんな記事も読んでいます

<

>