【CSS】マウスオーバーしたときに画像が拡大(縮小)するやり方

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とかにすれば縮小される) */
}

スポンサーリンク

css

Posted by ton