Warning: Use of undefined constant _aioseop_description - assumed '_aioseop_description' (this will throw an Error in a future version of PHP) in /home/users/2/tetsugrande/web/tetsugrande.net/wp-content/themes/tetsugrande/header.php on line 52
[IE6対応]簡単にCSSだけでやる画像のロールオーバー(手抜きです) - TETSUGRANDE

[IE6対応]簡単にCSSだけでやる画像のロールオーバー(手抜きです)

デザイナーから上がってきたPSDを開くとロールーオーバーしたときのレイヤーがない人いません? そういう人はいつもない。ない人はいつもない。そんなもんです。 俺「これどうすんの?」デザイナー「テキトーに作っておいて」(すでに別の案件に入っている)

じゃあテキトーにやってやろうじゃねーか。という手抜きです。

htmlとCSSのソースサンプルは下記です。 基本的に、画像に大してロールオーバしたさいに、画像の80%透過しているだけです。

メリット

  • 楽チン(大事です)
  • 1枚の画像でやるのでhoverのときにチラつかない。
  • IE対応

デメリット

  • 「濃く」はできない。
  • エリア全体が薄くなる。

HTML

<a href="#"><img src="hoge.jpg" class="alpha"></a>

CSS

a:hover img.alpha{
    -moz-opacity:0.8;
    opacity:0.8;
    filter: alpha(opacity=80);
}

DEMO

sample

もちろん時間があれば、ちゃんとロールオーバ用のCSSを用意した方がいいと思います。

PAGE TOP