リンク画像をホバーアニメーションで暗くする方法

html、css、js等でリンクの設定された画像を、マウスオーバーでゆっくりと暗くなりテキストが表示される方法はありませんでしょうか。

・マウスオーバーでゆっくり画像が暗くなり、テキストが表示される
・画像を押すとリンク先へ移動する
・マウスを画像から離すと元に戻る

もし上記のものが難しければ、ゆっくりと別の画像に入れ替わる方法はありませんでしょうか。
どなたかご教授お願い致します。

No.1 回答者： neconeco333 回答日時： 2013/11/02 19:18

cssのみでロールオーバー(ホバー)時に画像透過をさせ簡単にロールオーバーを表現する方法なんですが...

a:hover img
{
opacity:0.8;
filter: alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
background: #fff;
}

です。

このタグをとってきたurlです。
http://www.devolen.com/blog/html_css/rollover_al …

ただこれは透過度を変化させているので、暗くという感じにするにはbackgraund：colorを黒（#000）にしておく必要があります。

これ以外にも方法はあると思いますので参考までに(^^)

この回答へのお礼

なるほど、透過させる方法があるのですね。勉強になりました。
まだゆっくり切り替わるアニメーションと、テキストを載せる方法がわからないので
もし方法がわかりましたら、またご教授をお願い致します。
ご回答、ありがとう御座いました。

お礼日時：2013/11/02 19:36

No.2 ベストアンサー 回答者： neconeco333 回答日時： 2013/11/02 23:32

・マウスオーバーでゆっくり画像が暗くなり、テキストが表示されるは...

.fade {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}


でhtmlにclass="fade"を設定したら行けますよ(^^)

テキストはぎゃくの設定をcssですると背景画像と反対の動きになるので、そう設定すればよいです。


参考
http://e1116.blog.fc2.com/blog-entry-24.html

//////////////////////////////////////////////////////////////////////////

・画像を押すとリンク先へ移動する

<a href="URL">～</a>
です。

参考
http://www.tohoho-web.com/html/a.htm

//////////////////////////////////////////////////////////////////////////

・マウスを画像から離すと元に戻る

一番上の記載ある設定を行うと自然とホーバー時から通常時に戻るので戻ります。

//////////////////////////////////////////////////////////////////////////


このサイトの逆引きで
aタグとか基本なら何とかなりますよ(^^)
http://www.tohoho-web.com/html/index9.htm

あとはググるしかないですけど、ググるコツみたいなのもしていくと何となく分かって来ますよ(^^)

頑張ってください。

この回答へのお礼

ご回答ありがとうございます。
おかげさまで無事解決することができました！

機会がありましたら、またご教授頂けると幸いです。
本当にありがとう御座いました。

お礼日時：2013/11/03 19:37