【CSS】マウスオーバーしたときに画像が拡大（縮小）するやり方
ホームページとかで、マウスを画像の上にあてると画像がふわっと拡大・縮小されるページありますよね。
そのやり方を紹介します。
[サンプル]
枠の中の画像にマウスのカーソルをあてると画像が拡大します。
ソースコードは以下です。
[index.html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<a href="#">
<div class="img-area">
<img src="https://programming.sincoston.com/wp-content/uploads/2018/12/icon.jpg">
</div>
</a>
</body>
</html>[index.css]
a {
width: 100px;
height: 100px;
display: block;
text-decoration: none; /* リンクの下線とかのデコレーションをなくす */
}
a .img-area {
border: 2px solid; /* 画像の拡大が見えやすいように外枠を付ける */
overflow: hidden; /* マウスオーバーで画像が拡大された時にはみ出た部分は非表示にする */
}
a .img-area img {
width: 100px;
height: 100px;
transition: 1s; /* マウスオーバーのアニメーションを1秒かけて行う */
}
a:hover .img-area img {
transform: scale(2); /* マウスオーバーで画像を2倍にする（値を0.5とかにすれば縮小される） */
}