スタイルシートのみで画像にアクションをかける

2009 年 11 月 9 日 by とみせん店長

Posted under: css, css-応用編

通常、画像をロールオーバーするには２種類の画像が必要ですが、
画像は１枚のみで、スタイルシートでフィルターをかけ、画像を透過するアクションの方法です。

方法は実にシンプルで以下の記述をスタイルシートに加えるだけ。

1
2
3
4
5
6

/* フィルター*/
a:hover img {
-moz-opacity:0.5;
opacity:0.5;
filter: alpha(opacity=50);
}

それぞれの数値（0.5 ・ 0.5 ・ 50 ）を調整することで
各ブラウザでの画像の透明度を調節します。

とても便利ですが、上記の記述のままだと全ての画像に
フィルターがかかりますので、使いたいところだけフィルターを掛けたい場合は、
クラスなどで指定してください。

例えば、

1
2
3
4
5

.sample a:hover img {
-moz-opacity:0.5;
opacity:0.5;
filter: alpha(opacity=50);
}

みたいな感じです。

こちらも合わせてご覧ください - このページの内容と関連がある記事 -

2 Comments + Add Comment

りゅうのすけ 2010年3月15日 11:57 AM

はじめまして！

わたしもショップサーブを利用していますが大変参考になります。
ありがとうございます。

早速試してみたところ、うまくいきました！！
いや～、感謝感激です！！
とみせん店長 2010年3月15日 3:30 PM

> にゅうのすけ様、

はじめまして！

お役にたてましたようでよかったです　＾＾*

より良いショップ目指してお互いに頑張っていきましょう♪

TrackBack URL for this entry