CSS:オンマウス(hover)で画像をフェードする


CSSだけで、オンマウス(hover)時に画像をフェードインさせ、マウスアウト時にはフェードアウトさせる方法。

CSSの opacityと transitionを使用して、オンマウス(hover)した時に画像をフェードさせる方法です。マウスアウトした時もフェードの効果を与えるにはどうすればよいか知りましたので、メモしておきます。

CSSを使用すれば、リンクの設定された画像にオンマウスした時に画像をゆっくり透過(フェードイン)できますが、マウスアウトした時にフェードアウトする方法です。
HTMLのソースは以下の通りです。

HTML

このリンクの設定された画像にフェードの効果を与えたかったので、感覚的に以下のCSSを書いたのですが…

CSS

この書き方で、オンマウスは間違いなくフェードインします。
が、マウスアウトした時はフェードせず瞬時に100%表示になってしまいます…。

解決策

とても単純でした。transitionを a imgに記述します。

CSS

a:hoverはあくまで「オンマウスした時」ですので、マウスアウトした時は動かないということです。a imgに transitionを記述することで、元の状態に戻る時もアニメーションしてくれます。

フェードアウト効果のあり/なしだけでも印象は変わりますので、時と場合に応じて使い分けたいものです。