画像にマウスカーソルを持っていくと、色が薄くなったりするウェブサイトがあると思います
それをCSSでやってしまおうという話です。
この方法以外には、色を薄くした画像を用意して、
マウスカーソルをもっていったときにその画像を表示させるといった方法もあるのですが、
それよりこちらのほうが手軽にできそうです
記述方法は、
a:hover img{
filter: alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
}
といった具合です
三つとも同じ内容ですが、
filterがIE用
-moz-opacityがFirefox用
opacityがSafari,Opera用
だそうです
ブラウザごとで使えるCSSが違うみたいですね
ちなみに、0.7とか70は、透過度70％という意味で、
ここを0.4とか4.に変えたら透過度を変えることが出来ます
div要素内の画像だけに適用したい場合は、
他の書き方と一緒で、a:hoverの前に#idなり、.classなりをつければできます
ちなみにこの場合、
あるメニューページを開いてる場合に、先に薄い画像を表示されてるようにしておくと、
そのカーソルを合わせたときに更に薄い画像になってしまうという問題点がでてきそうです
最終的にはやっぱらカーソルが上にのってるときに画像が切り替わるようにしたほうがいいのかな？
けど色を薄くさせるような手軽なソフトを持ってないので、しばらくはこのまま放置になりそうです。