• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

ホバーのときに画像を拡大する方法

投稿者アイコン
2021/11/17
書いた人:
futappa_staff
カテゴリ:
CSS
6,538 views

ホバーしたらサムネイルが拡大するレイアウトの作り方を紹介します。よく見るレイアウトなので、ぜひやってみてください♪

ホバーのときに画像を拡大する方法

目次

はじめに

よく見るホバーしたらサムネイルが拡大するレイアウトを作ってみようと思います。CSSだけでできますので、1つずつ確認していきましょう。

<サンプル>

実装方法について

1、divの中に写真を配置します。

			<div class="sample">
				<img src="https://placeimg.com/200/150/people" alt="">
			</div>
		
		.sample{
			width: 200px;
			height: 150px;

			border: 3px solid #999;/* 装飾のため、なくてもOK */
		}
		

2、ホバーしたときに拡大するようにする。

拡大するために、img:hoverのところに、「transform: scale(1.2);」をつけます。さらにimgに「transition:all 0.3s;」をつけることで、動きがスムーズになります。
ですが、このままでは枠(div)から画像がはみ出てしまいましたね‥!

			<div class="sample">
				<img src="https://placeimg.com/200/150/people" alt="">
			</div>
		
		.sample{
			width: 200px;
			height: 150px;

			border: 3px solid #999;/* 装飾のため、なくてもOK */
		}

		.sample img{
			/* 拡大するのにかかる時間 */
			transition:all 0.3s;
		}

		.sample img:hover{
			/* ホバーしたら1.2倍サイズに拡大 */
			transform: scale(1.2);
		}
		

3、はみ出た部分を非表示にする。

画像がはみ出ないように、divに対して「overflow: hidden;」を追加します。これで完成です!!

			<div class="sample">
				<img src="https://placeimg.com/200/150/people" alt="">
			</div>
		
		.sample{
			/* 拡大してはみ出した部分を非表示にする */
			overflow: hidden;
			width: 200px;
			height: 150px;

			border: 3px solid #999;/* 装飾のため、なくてもOK */
		}

		.sample img{
			/* 拡大するのにかかる時間 */
			transition:all 0.3s;
		}

		.sample img:hover{
			/* ホバーしたら1.2倍サイズに拡大 */
			transform: scale(1.2);
		}
		

まとめ

うまくできましたか?よく見るレイアウトなので、この記事で理解が深まったら幸いです♪


この記事を読んだ人はこんな記事も読んでいます