マウスオーバーで画像を拡大表示

MARKLEAPS

2021.06.25

cssで、画像をマウスオーバーした時に拡大表示させる
方法をご紹介します。

img画像を拡大表示する場合

・html
imgをdivで囲みます。

.bs_box01 {
	max-width: 350px;
	margin: 0 auto;
	overflow: hidden;
}

.bs_box01 {

max-width: 350px;

margin: 0 auto;

overflow: hidden;

}

・css

.bs_box01 {
	max-width: 350px;
	margin: 0 auto;
	overflow: hidden;
}

.img_zoom:hover {
	transition: 0.6s all;
	transform: scale(1.2);
}

.bs_box01 {

max-width: 350px;

margin: 0 auto;

overflow: hidden;

}

.img_zoom:hover {

transition: 0.6s all;

transform: scale(1.2);

}

◆transform: scale　でimgをhoverした際に拡大させます。
◆滑らかに拡大するよう、transitionでアニメーションさせます。
◆画像を囲むdivにoverflow: hidden; を記述することで、はみ出た部分を非表示にしています。

背景画像像を拡大表示する場合

ほぼimg画像の時と同じ方法で実現できます。

DEMO

・html
背景画像を表示するdivをdivで囲みます。

<div class="bs_box01">
    <div class="bs_bgimg01"><span>画像名</span></div>
</div>

</div>

・css

.bs_bgimg01 {
	width: 100%;
	background: url(images/img_hover-zoom01.jpg) no-repeat center center;
	background-size: contain;
}
.bs_bgimg01:before {
	content: "";
	display: block;
	padding-top: 75%;
}
.bs_bgimg01 span {display: none;}

.bs_bgimg01:hover {
	transform: scale(1.2);
	transition: 0.6s all;
}

.bs_bgimg01 {

width: 100%;

background: url(images/img_hover-zoom01.jpg) no-repeat center center;

background-size: contain;

}

.bs_bgimg01:before {

content: "";

display: block;

padding-top: 75%;

}

.bs_bgimg01 span {display: none;}

.bs_bgimg01:hover {

transform: scale(1.2);

transition: 0.6s all;

}

◆transform: scale　で背景画像のdivをhoverした際に拡大させます。
◆滑らかに拡大するよう、transitionでアニメーションさせます。
◆背景画像を囲むdivにoverflow: hidden; を記述することで、はみ出た部分を非表示にしています。

CSS

よく読まれている関連記事

CSSアニメーション　2つの機能