CSSのtransition、transform、filterプロパティと疑似クラス:hoverを使う

CSSのtransition、transform、filterプロパティと疑似クラス: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:roteteY(360deg);}
としてマウスオーバー時に画像を回転させています。


:hoverとtransform:rotateX() scale()

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

Mam's WebSite