トップへ(mam-mam.net/)

CSSの疑似クラス:hover(ホバー時)で効果を付ける方法

検索:

: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);}
としてマウスオーバー時に画像を回転させています。