CSSだけで作る、ホバーするとふわっと拡大する画像

ホバー

CSSだけで作る、ホバーするとふわっと拡大する画像

投稿日2026/02/10

更新日2026/2/4

画像を並べるだけのカードレイアウトでは、少し物足りない。
そんなときに使えるのが、ホバーすると自然にアップする画像カードです。

このサンプルでは、カードにマウスを乗せると全体がスケールアップし、背景画像もわずかに拡大。
CSSだけで、奥行きと存在感のあるインタラクションを作っています。

目次

  1. プレビュー
  2. コード
  3. 詳しい説明
  4. 関連記事

Preview プレビュー

Code コード 

<div class="kumonosu-main-container">
	<article class="kumonosu-cards">
		<!-- 1枚目 -->
		<div class="kumonosu-previewCard">
			<img src="https://images.unsplash.com/photo-1462331940025-496dfbfc7564?auto=format&fit=crop&q=80&w=800" class="kumonosu-backdrop" alt="Volcano" />
			<div class='kumonosu-content'>
				<div class="kumonosu-category">Nature</div>
				<div class="kumonosu-title">Crimson Peak</div>
				<div class="kumonosu-description">
					<p>The eternal fire that sleeps within the heart of the mountain.</p>
					<span>
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#e3e3e3">
							<path d="M504-480 348-636q-11-11-11-28t11-28q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L404-268q-11 11-28 11t-28-11q-11-11-11-28t11-28l156-156Z" />
						</svg>
					</span>
				</div>
			</div>
		</div>
		<!-- 2枚目 -->
		<div class="kumonosu-previewCard">
			<img src="https://images.unsplash.com/photo-1551244072-5d12893278ab?auto=format&fit=crop&q=80&w=800" class="kumonosu-backdrop" alt="Deep Sea" />
			<div class='kumonosu-content'>
				<div class="kumonosu-category">Mystery</div>
				<div class="kumonosu-title">Abyssal Echo</div>
				<div class="kumonosu-description">
					<p>Silent whispers from the bottom of the unexplored ocean.</p>
					<span>
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#e3e3e3">
							<path d="M504-480 348-636q-11-11-11-28t11-28q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L404-268q-11 11-28 11t-28-11q-11-11-11-28t11-28l156-156Z" />
						</svg>
					</span>
				</div>
			</div>
		</div>
		<!-- 3枚目 -->
		<div class="kumonosu-previewCard">
			<img src="https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?auto=format&fit=crop&q=80&w=800" class="kumonosu-backdrop" alt="Galaxy" />
			<div class='kumonosu-content'>
				<div class="kumonosu-category">Cosmic</div>
				<div class="kumonosu-title">Void Horizon</div>
				<div class="kumonosu-description">
					<p>Beyond the stars lies the beginning of another dimension.</p>
					<span>
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#e3e3e3">
							<path d="M504-480 348-636q-11-11-11-28t11-28q11-11 28-11t28 11l184 184q6 6 8.5 13t2.5 15q0 8-2.5 15t-8.5 13L404-268q-11 11-28 11t-28-11q-11-11-11-28t11-28l156-156Z" />
						</svg>
					</span>
				</div>
			</div>
		</div>
	</article>
</div>
*, *::before, *::after {
	box-sizing: border-box;
}
html, body {
	font-size: 62.5%;
	/* 1rem = 10px */
	margin: 0;
	padding: 0;
}
body {
	min-height: 100vh;
	background: #000;
	color: #fff;
	display: grid;
	place-items: center;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	padding: 2rem;
}
/* コンテナ：3枚の間隔 3rem を保持 */
.kumonosu-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 32rem));
	gap: 3rem;
	width: 100%;
	max-width: 102rem;
	justify-content: center;
	margin: 0 auto;
}
.kumonosu-previewCard {
	--gutter: 1.5rem;
	--brightness: 0.85;
	--saturation: 1.5;
	--frostRadius: 1.5rem;
	padding: var(--gutter);
	border-radius: var(--gutter);
	aspect-ratio: 4 / 3;
	width: 100%;
	display: grid;
	justify-content: start;
	align-content: end;
	position: relative;
	background: #333;
	overflow: hidden;
	cursor: pointer;
	transition: transform 250ms ease-in-out;
}
.kumonosu-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
	pointer-events: none;
	user-select: none;
	width: 100%;
	height: 100%;
	transition: transform 500ms ease-in-out;
}
.kumonosu-previewCard:hover {
	transform: scale(1.05);
	z-index: 10;
}
.kumonosu-previewCard:hover .kumonosu-backdrop {
	transform: scale(1.1);
}
.kumonosu-previewCard:hover svg {
	transform: scale(1.5);
}
.kumonosu-previewCard::after {
	content: "";
	position: absolute;
	inset: -0.5rem;
	z-index: 1;
	pointer-events: none;
	backdrop-filter: blur(var(--frostRadius)) saturate(var(--saturation)) brightness(var(--brightness));
	background: linear-gradient(to bottom,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.2) 100%);
	mask-image: linear-gradient(to bottom,
			transparent 0%,
			rgba(0, 0, 0, 0.1) 40%,
			rgba(0, 0, 0, 0.5) 55%,
			black 75%);
	-webkit-mask-image: linear-gradient(to bottom,
			transparent 0%,
			rgba(0, 0, 0, 0.1) 40%,
			rgba(0, 0, 0, 0.5) 55%,
			black 75%);
}
.kumonosu-content {
	position: relative;
	z-index: 2;
	display: grid;
	bottom: 0;
	justify-content: start;
	align-content: end;
	gap: 0.5rem;
	width: 100%;
}
.kumonosu-category {
	text-transform: uppercase;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.1rem;
	opacity: 0.45;
}
.kumonosu-title {
	font-size: 1.7rem;
	font-weight: bold;
}
.kumonosu-description {
	font-size: 1.3rem;
	line-height: 1.35;
	display: grid;
	grid-template-columns: 1fr auto;
	place-content: start;
	gap: 0.5rem;
}
.kumonosu-description p {
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.kumonosu-description span {
	transform: translateY(-0.1rem);
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	transition: transform 250ms ease-in-out;
}
@media (max-width: 768px) {
	.kumonosu-cards {
		grid-template-columns: minmax(0, 40rem);
		gap: 2rem;
	}
}

Explanation 詳しい説明

どんなUIなのか

このレイアウトは、画像を主役にしたカードUIです。通常時は静かに並び、ホバーするとカード全体がふわっと拡大して注目を集めます。

同時に背景画像も少しだけズームすることで、「浮き上がる」「近づいてくる」ような奥行きのある印象を与えています。

仕様（このコードでやっていること）

  • レイアウト
    ・CSS Gridで3枚のカードを横並びに配置
    ・モバイルでは1カラムに自動切り替え
  • ホバー演出
    ・.kumonosu-previewCard:hover でカード全体を scale(1.05)
    ・背景画像は別要素として管理し、ホバー時に scale(1.1)
    ・transition のみを使った軽量なCSSアニメーション
  • ガラス風オーバーレイ
    ・::after 疑似要素で backdrop-filter: blur() を使用
    ・下方向にフェードするマスクで、文字が読みやすい構成
  • 情報レイヤー
    ・カテゴリ / タイトル / 説明文を下部に固定
    ・テキストが長い場合は text-overflow: ellipsis で省略

カスタム方法

1. 拡大率を変える

.kumonosu-previewCard:hover {
  transform: scale(1.05);
}
  • 数値を上げるとインパクト重視
  • 下げると控えめで上品な印象になります

2. 背景のズーム感を調整する

.kumonosu-previewCard:hover .kumonosu-backdrop {
  transform: scale(1.1);
}
  • カードより少し大きくすると、奥行きが強調されます

3. ガラス感を変える

--frostRadius: 1.5rem;
--brightness: 0.85;
--saturation: 1.5;
  • ブラーを強く → よりガラスっぽく
  • 明るさを下げる → 落ち着いた雰囲気に

注意点

  • backdrop-filter は未対応ブラウザがある
    ・古いブラウザではガラス効果が効かない場合があります
    ・ただし、デザインが崩れることはありません
  • 拡大時の重なり順に注意
    ・z-index を上げているため、カード同士が重なっても自然に表示されます
    ・レイアウト変更時はここを調整してください
  • ホバー前提のUI
    ・スマホでは常時表示用のデザインとして考えるのがおすすめです

Related 関連記事