マウスオーバーで透明の白い幕をかけたい

CSSか画像でやっているのかわかりませんが、
リンク画像をマウスオーバーすると、白い幕が張られる
方法があったら教えてください。CSSで実現したいです。

http://toyota.jp/
トヨタホームページのトップページ左側にそのような
感じの白い透明のスクリーンがあります。
そのような感じで実現したいと思います。
よろしくお願いします。

No.4 ベストアンサー 回答者： mocchi_mo 回答日時： 2009/10/09 16:29

背景が白であればcssで擬似クラスとopacityプロパティを使ってあげれば対応可能です。

指定したい箇所のdivのIDが「navi」だった場合
ex)
div#navi a:hover * {
filter: alpha(style=0; opacity=85);
-moz-opacity: 0.85;
opacity: 0.85;
}
filterがIE独自仕様
-moz-opacityがFirefox独自仕様
opacityがSafari,Opera独自仕様
になります。
値の部分(例：では0.85になっている部分)を0.1～1.0までの値で指定します。

No.3 回答者： mtaka2 回答日時： 2009/10/09 15:35

「白い幕が張られ」たような画像を別途用意しておけば、

CSSの :hover 疑似クラスで実現できます。

「CSS ロールオーバー」もしくは「CSS hover」で探せば解説ページはいろいろ見つかると思います。とりあえず探してみて見つけたのは

http://www.nishishi.com/css/link-image-hoverchan …
http://www.stylish-style.com/csstec/basic/l-roll …
http://css-eblog.com/csstechnique/css-2.html

こんな感じ。

個別の画像は用意せず、半透明合成で実現することも可能でしょうけど、
現状ではブラウザ依存が大きいので、合成済の画像を作った方が楽だと思います。

No.2 回答者： med2dic 回答日時： 2009/10/09 15:21

普段はJavascriptでやっちゃうので実際に試したことはないのですが・・・

参考URL：http://www.aboutworks.com/shokodei/diary/doc/over/

No.1 回答者： pasocom 回答日時： 2009/10/09 14:08

ご提示のサイトの方法は、おそらく「Javascript」であろうと思います。

記述方法は下記の「JAVATEAはいかが」の「 JAVATEA12:マウスを当てただけで画像を切り替えます 」を参照下さい。
http://www.geocities.jp/digitwland/javatea/javat …

この回答へのお礼

回答ありがとうございました。

CSSでやりたいのですが、無理でしょうか？
ご存知の方いたらよろしくお願いします。

お礼日時：2009/10/09 14:18