CSS opacityとtransitionでマウスオーバーしたとき透明に変化させる方法

opacityとtransitionでマウスオーバーしたとき透明に変化させる方法を説明します。

よくある方法としてリンク画像にマウスを乗せたときに変化を加えるために透明にするということがあります。

transitionを使うことで簡易なアニメーションを使うことができます。

完成イメージ

マウスを乗せてみてください

html

<a href="#"><img src="1.jpg"></a>

CSS

a img{
    transition: .5s;
}
a:hover img{
    opacity: .5;
}

transitionはマウスを乗せる前のほうに指定

ポイントとして、transitionは:hoverを指定する前に指定します。
a:hover img（だけ）に指定した場合マウスを外した時アニメーションなしですぐ元に戻ってしまいます。

透明の指定はopacity

透明の指定はopacityを使います。opacityは0～1を指定できます。0だと透明、0.5だと半透明、1だと不透明です。

まとめ

transitionはマウスを乗せる前、opacityはマウスを乗せた後に指定しましょう。

以上、opacityとtransitionでマウスオーバーしたとき透明に変化させる方法でした。