【HTML CSS】画像ホバーエフェクト

いろんなサイトで見かける画像エリアをホバーしたときにリンクですよってのを視覚的にわかりやすくするエフェクトですが、無難なもので言うと単に透過させるだけですがこれだと味気ないのでよくあるのが画像にホバーすると少し画像だけがズームアップするエフェクトです
cssだけで簡単に出来ます。

<a class="zoom" href="#">
    <img src="hogehoge.jpg" alt="hoge">
</a>

画像を囲うaタグにクラスをつけておきそのクラスに以下のスタイルを当てます。

.zoom{
 overflow: hidden;
 transition: 0.7s;
}

.zoom:hover img{
 transform: scale(1.2, 1.2);
}

img要素を囲むaタグにoverflow:hiddenで拡大された際にはみ出ないようにし、ふわっと動くようにtransitionをつけています。
そしてzoomクラスがついたaタグにホバーすると画像が拡大します。
transform: scale(1.2, 1.2)これはx軸とy軸に1.2ずつ拡大してねって指定です。