CSSの:hoverで画像に動きをつける｜transformとtransitionの実例集

CSSの:hoverで画像に動きをつける｜transformとtransitionの実例集

CSSの:hover疑似クラスを使って、画像に拡大・回転・コントラスト変化などのホバー効果をつける方法を紹介します。
このページでは、transformとtransitionを組み合わせた実用的なコード例を掲載しており、Windows環境でも動作確認済みです。
「ホバー効果」「transition: all 0.3s;」「hover Windows」などのキーワードでお探しの方におすすめです。

:hoverとfilter:contrast()

a img{filter:contrast(50%);transition:all 0.3s;}
a:hover img{filter:contrast(100%);}
としてマウスオーバー時にコントラストを変化させています。

:hoverとtransform:scale()

a img{transform:scale(1.0);transition:all 0.3s;}
a:hover img{transform:scale(1.2);}
としてマウスオーバー時に画像サイズを変化させています。

:hoverとtransform:rotateY()

a img{transform:rotateY(0deg);transition:all 0.5s;}
a:hover img{transform:rotateY(360deg);}
としてマウスオーバー時に画像を回転させています。

:hoverとtransform:rotateZ() scale()

a img{transform:rotateZ(0deg) scale(1.0);transition:all 0.1s;}
a:hover img{transform:rotateZ(-10deg) scale(1.1);}
としてマウスオーバー時に画像を回転させています。