画像にオンマウスで暗くする方法

質問

http://fukuganrss.blog27.fc2.com/
上記のサイトの画像にマウスカーソルを合わせると画像がちょっと暗く影っぽくなりますよね？
このやり方のcssのソースが分かる方、教えて下さい。

回答No.3

karita_83 · ベストアンサー

こんにちは。初めまして。

画像は一枚しか用意できなくて、カーソルオンで画像を暗くしたい。
ただしcssで、ということですよね。

そうすると、
ｈｔｍｌ

<div>
<a href="#">テキストテキスト</a>
</div>

ｃｓｓ

div
{
background:画像;
width:画像の大きさ
height:画像の大きさ
}

a
{
display:block;
width:画像の大きさ
height:画像の大きさ
text-align:left;
text-indent:-9999px;
}

a:hover
{
background:半透明の任意の暗さになってるpng画像;
width:画像の大きさ
height:画像の大きさ
display:block;
text-align:left;
text-indent:-9999px;
}

多分こんなカンジでご指定いただいたページと同じような動きをするのではないかなと思います。
試してないのでわからないですが。
文字を出したいようであれば、text-indentを0pxにしてください。

また、まだまだ生き残ってるＩＥ6では半透明のpngが使えませんので、
IE6も対応ブラウザに入れるようであればハックを使ってあげてください。

でも正直ここまでやるのであれば画像を二個用意した方が早いんじゃないかとか、
javascript使った方が楽だよね、とか思います。