CSS：オンマウス（hover）で画像をフェードする
CSSの opacityと transitionを使用して、オンマウス（hover）した時に画像をフェードさせる方法です。マウスアウトした時もフェードの効果を与えるにはどうすればよいか知りましたので、メモしておきます。
CSSを使用すれば、リンクの設定された画像にオンマウスした時に画像をゆっくり透過（フェードイン）できますが、マウスアウトした時にフェードアウトする方法です。
HTMLのソースは以下の通りです。
HTML
|
1 |
<a href="#"><img src="img/id.png" alt="" width="300" height="100" /></a> |
このリンクの設定された画像にフェードの効果を与えたかったので、感覚的に以下のCSSを書いたのですが…
CSS
|
1 2 3 4 5 6 7 8 9 10 11 |
a:hover img { opacity: .5; -webkit-opacity: .5; -moz-opacity: .5; filter: alpha(opacity=50); /* IE lt 8 */ -ms-filter: "alpha(opacity=50)"; /* IE 8 */ -webkit-transition: opacity 1s ease-out; -moz-transition: opacity 1s ease-out; -ms-transition: opacity 1s ease-out; transition: opacity 1s ease-out; } |
この書き方で、オンマウスは間違いなくフェードインします。
が、マウスアウトした時はフェードせず瞬時に100％表示になってしまいます…。
解決策
とても単純でした。transitionを a imgに記述します。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
a:hover img { opacity: .5; -webkit-opacity: .5; -moz-opacity: .5; filter: alpha(opacity=50); /* IE lt 8 */ -ms-filter: "alpha(opacity=50)"; /* IE 8 */ } a img { -webkit-transition: opacity 1s ease-out; -moz-transition: opacity 1s ease-out; -ms-transition: opacity 1s ease-out; transition: opacity 1s ease-out; } |
a:hoverはあくまで「オンマウスした時」ですので、マウスアウトした時は動かないということです。a imgに transitionを記述することで、元の状態に戻る時もアニメーションしてくれます。
フェードアウト効果のあり／なしだけでも印象は変わりますので、時と場合に応じて使い分けたいものです。
