2010-12-26

マウスオーバー画像を作るのが面倒なとき用 CSS メモ

サムネイルなどの画像の数が多くて、マウスオーバー用の画像を作るのが面倒なときに、CSS だけでそれっぽく見せるための方法。
ものすごく個人的メモ。

参考にさせていただいたのは、こちらの記事。
指定した要素を半透明にできるopacity(IEでも使える) | Coder’s Note
http://codersnote.com/archives/css-opacity

opacity: 0.5;
-moz-opacity: 0.5; /* Firefox */
filter: alpha(opacity=50); /* IE6/7 */
-ms-filter: "alpha(opacity=50)"; /* IE8 */

これの適用先をマウスオーバー時の画像にする。

.hover a:hover img{
  opacity: 0.75;
  -moz-opacity: 0.75; /* Firefox */
  filter: alpha(opacity=75); /* IE6/7 */
  -ms-filter: "alpha(opacity=75)"; /* IE8 */
}

50%だとさすがに透明すぎるので、75%くらいに設定することが多いですが、基本的にはこれをコピペで数字を変えるだけでオッケーなのです。ナイス!

毎回新規の id や class を作るのは CSS が長くなるだけなので、.hover のような class を作って指定したい箇所に付与していくのが無難な使い方になるのかなと思います。

ただし、これがうまくいくのは背景が単色の時だけです(特に白系の時)。
画像半透明にしているので、背景が黒なら画像はグレーっぽくなるし、背景が画像ならそれが透けて見えてしまいます。
そういった場合は、画像の1つ外側を囲むタグ(例えば div)の背景に白を指定することで解決。

場合によっては本来必要がなかったタグを追加したり、使用しにくい構造だったりしますが、画像を毎回作る手間を考えれば小さい手間じゃないでしょうか。