【CSS】画像を正円で表示、ホバーすると画像を拡大させる

プロフィール画像に使えそうな表現。
ホバー時の画像の拡大は、記事のリンクの画像に対しても使えそう。

ポイント
①画像を正円で表示
・img要素をdivで囲み、width/heightに同じ数値を指定する。
・画像を丸くするために、img要素にborder-radius: 50%を指定する。
・画像を丸く囲む線をつけたいときは、img要素の親要素のdivに
borderの値、border-radius: 50%を指定する。
(img要素自体に指定することもできるが、box-sizing: border-boxの指定、またほかのプロパティで装飾を加えると、線が表示されないこともある。最終目標の表示形態を考え装飾を施すこと。)

②ホバーすると画像が拡大
・hover時に画像を拡大させるために、imgにtransform: scale(数値, 数値)を指定する。
・拡大してはみ出る部分を非表示にしたい場合は、親要素のdivに
overflow: hiddenを指定する。