最近、マウスオン（:hover）時に画像に様々なアニメーションが追加されているのをよく見かけます。
CSS3だけで実現できるhover時の効果をまとめてみました。
目次
利用方法
HTMLサンプル
<div class="">
<img src="./sample.png" alt="sample" />
</div>
上記のように、マウスオン時に変更したい画像をdiv要素などでくるみます。
div要素に下記に紹介する各クラスを付与して利用してください。
効果サンプルとCSS例
zoomin
マウスオンで画像を拡大する
画像の上にマウスオンすると、画像が拡大（ズームイン）します。
CSSサンプル
.zoomin1 img{
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.zoomin1:hover img{
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
マウスオンで画像を拡大して角度を変更する
画像の上にマウスオンすると、画像が拡大（ズームイン）して角度が斜めになります。
CSSサンプル
.zoomin2 img {
-webkit-transform: rotate(10deg) scale(1);
transform: rotate(10deg) scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.zoomin2:hover img {
-webkit-transform: rotate(0) scale(1.4);
transform: rotate(0) scale(1.4);
}
zoomout
マウスオンで画像を縮小する
画像の上にマウスオンすると、画像が縮小（ズームアウト）します。
CSSサンプル
.zoomout1 img {
-webkit-transform: scale(1.4);
transform: scale(1.5);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.zoomout1:hover img {
-webkit-transform: scale(1);
transform: scale(1);
}
マウスオンで画像を縮小して角度を変更する
画像の上にマウスオンすると、画像が縮小（ズームアウト）して角度が斜めになります。
CSSサンプル
.zoomout2 img {
-webkit-transform: rotate(10deg) scale(1.4);
transform: rotate(10deg) scale(1.4);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.zoomout2:hover img {
-webkit-transform: rotate(0) scale(1);
transform: scale(1);
}
opacity
マウスオンで画像を透過する
画像の上にマウスオンすると、画像が若干透過します。
CSSサンプル
.opacity:hover img{opacity: 0.8;}
マウスオンで画像を透過して背景を見せる
画像の上にマウスオンすると、画像が若干透過して背景色が見えます。
CSSサンプル
.opacity_color{background-color: #f6cd4c;}
.opacity_color:hover img{opacity: 0.8}
