画像に乗せるとズームする動きをCSSだけで｜コピペで使える5種類と、まわりを崩さない書き方

写真にマウスを乗せると、枠の中で写真が少しだけ大きくなる。ブログの記事一覧や制作実績のページでよく見る動きは、CSSだけで作れます。JavaScriptは要りません。

使いどころ

押すと次のページへ進む画像（記事一覧・商品一覧・実績一覧）にだけ使う。押せない写真や、読ませたい図には付けない。

使う部品は3つです。画像を大きくする transform: scale()（トランスフォーム・スケール）、枠からはみ出した部分を隠す overflow: hidden（オーバーフロー・ヒドゥン）、そして前回までと同じ、変化を滑らかにつなぐ transition（トランジション）です。

連載「WEBの技術」の6回目です。
ボタン、文字のリンクと「押せるもの」を見てきたので、今回は画像のリンクを取り上げます。

完成見本：画像のズーム5種類

下の5つは、ページを開いた時点から、「普段 → マウスを乗せたとき → 普段」を自動でくり返しています。実際にマウスを乗せて試せる見本は、後半の「応用」に置いています。

ZOOM IN1. ふわっと拡大

ZOOM OUT2. 寄りから引きへ

ギャラリーを見る

WITH LABEL3. 拡大＋少し暗く

BLOG季節のおすすめプラン

CARD4. カード全体に乗せる

ROUND5. 丸い画像

※ 見本の画像は、写真のかわりに用意したイラストです。

変化の前と後を、止めて並べるとこうなります。

元の状態

乗せたとき

1. ふわっと拡大

2. 寄りから引きへ

3. 拡大＋少し暗く

ギャラリーを見る

4. カード全体に乗せる

BLOG季節のおすすめプラン

5. 丸い画像

※ スマホやパソコンで「動きを減らす」設定をオンにしている方には、滑らかに大きくなる動きをなくし、すぐに切り替わる形で表示しています。理由は後半の「見る人への配慮」で説明します。

コピペ用のコード

見本ごとに、HTMLとCSSを並べました。HTMLは画像を置きたい場所に、CSSはサイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。src の画像のアドレスと href="#" は、実際の画像とリンク先に書きかえてください（この記事の見本は、押すと「応用」の節へ移るようにしています）。

CSSの前半にある .kd-iz は、5種類に共通する「枠」の指定です。同じページで何種類か使うときは、1回だけ入れれば足ります。クラス名の頭の kd-iz- は、サイトのほかのデザインと名前がぶつからないようにするための目印です。

1. ふわっと拡大

画像が枠の中で少しだけ大きくなります。枠の大きさは変わらないので、まわりの文字や画像は動きません。いちばん基本の形です。

自動で再生中

HTML

<a class="kd-iz kd-iz-basic" href="#"><img src="https://www.kakeru-d.jp/wp-content/uploads/2026/10/css-image-hover-zoom-mountain.jpg" alt="山の写真の一覧へ" width="1200" height="800"></a>

CSS

/* 5種類に共通：枠からはみ出した部分を隠す */
.kd-iz {
  display: block;
  overflow: hidden;
  border-radius: 12px;
}
.kd-iz img {
  display: block;
  width: 100%;
  height: auto;
}
/* キーボードで選んだときの枠。消さずに、はっきり見せる */
.kd-iz:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 3px;
}
.kd-iz-basic img {
  transform: scale(1);
  transition: transform 0.4s ease;
}
.kd-iz-basic:hover img,
.kd-iz-basic:focus-visible img {
  transform: scale(1.08);
}
/* 動きを減らす設定の人には、滑らかに大きくする動きをなくして、すぐ切り替える */
@media (prefers-reduced-motion: reduce) {
  .kd-iz-basic img {
    transition: none;
  }
}

2. 寄りから引きへ

最初は少し大きく表示しておき、乗せると元の大きさに戻ります。写真の全体が見えてくるので、「中をのぞく」ような印象になります。

自動で再生中

HTML

<a class="kd-iz kd-iz-out" href="#"><img src="https://www.kakeru-d.jp/wp-content/uploads/2026/10/css-image-hover-zoom-sea.jpg" alt="海の写真の一覧へ" width="1200" height="800"></a>

CSS

/* 5種類に共通：枠からはみ出した部分を隠す */
.kd-iz {
  display: block;
  overflow: hidden;
  border-radius: 12px;
}
.kd-iz img {
  display: block;
  width: 100%;
  height: auto;
}
/* キーボードで選んだときの枠。消さずに、はっきり見せる */
.kd-iz:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 3px;
}
.kd-iz-out img {
  transform: scale(1.15);
  transition: transform 0.6s ease;
}
.kd-iz-out:hover img,
.kd-iz-out:focus-visible img {
  transform: scale(1);
}
/* 動きを減らす設定の人には、滑らかに大きくする動きをなくして、すぐ切り替える */
@media (prefers-reduced-motion: reduce) {
  .kd-iz-out img {
    transition: none;
  }
}

3. 拡大＋少し暗く

画像の上に文字を重ねた形です。乗せると画像が大きくなりながら少し暗くなり、文字が浮き出ます。文字は最初から出しておくので、スマホでも読めます。

ギャラリーを見る

自動で再生中

HTML

<a class="kd-iz kd-iz-label" href="#"><img src="https://www.kakeru-d.jp/wp-content/uploads/2026/10/css-image-hover-zoom-sea.jpg" alt="" width="1200" height="800"><span>ギャラリーを見る</span></a>

CSS

/* 5種類に共通：枠からはみ出した部分を隠す */
.kd-iz {
  display: block;
  overflow: hidden;
  border-radius: 12px;
}
.kd-iz img {
  display: block;
  width: 100%;
  height: auto;
}
/* キーボードで選んだときの枠。消さずに、はっきり見せる */
.kd-iz:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 3px;
}
.kd-iz-label {
  position: relative;
}
.kd-iz-label span {
  position: absolute;
  left: 16px;
  bottom: 14px;
  color: #FFFFFF;
  font-weight: 700;
  text-shadow: 0 1px 6px rgba(15, 23, 42, .8);
}
.kd-iz-label img {
  transform: scale(1);
  filter: brightness(.8);
  transition: transform 0.4s ease, filter 0.4s ease;
}
.kd-iz-label:hover img,
.kd-iz-label:focus-visible img {
  transform: scale(1.06);
  filter: brightness(.6);
}
/* 動きを減らす設定の人には、滑らかに大きくする動きをなくして、すぐ切り替える */
@media (prefers-reduced-motion: reduce) {
  .kd-iz-label img {
    transition: none;
  }
}

4. カード全体に乗せる

写真と見出しを1枚のカードにまとめ、カードのどこに乗せても画像が大きくなり、影が深くなります。ブログの記事一覧や、商品の一覧で使う形です。

BLOG季節のおすすめプラン

自動で再生中

HTML

<a class="kd-iz kd-iz-card" href="#"><span class="kd-iz-frame"><img src="https://www.kakeru-d.jp/wp-content/uploads/2026/10/css-image-hover-zoom-mountain.jpg" alt="" width="1200" height="800"></span><span class="kd-iz-body"><small>BLOG</small><b>季節のおすすめプラン</b></span></a>

CSS

/* 5種類に共通：枠からはみ出した部分を隠す */
.kd-iz {
  display: block;
  overflow: hidden;
  border-radius: 12px;
}
.kd-iz img {
  display: block;
  width: 100%;
  height: auto;
}
/* キーボードで選んだときの枠。消さずに、はっきり見せる */
.kd-iz:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 3px;
}
.kd-iz-card {
  color: #0F172A;
  text-decoration: none;
  background: #FFFFFF;
  border: 1px solid #D8E6F0;
}
/* 画像を入れる枠。ここでもはみ出しを隠す（文字の上に画像が重ならないように） */
.kd-iz-frame {
  display: block;
  overflow: hidden;
}
.kd-iz-body {
  display: block;
  padding: 12px 16px 16px;
  text-align: left;
}
.kd-iz-body small {
  display: block;
  color: #0369A1;
  font-weight: 700;
  letter-spacing: .1em;
}
.kd-iz-body b {
  display: block;
  font-size: 16px;
}
.kd-iz-card img {
  transform: scale(1);
  transition: transform 0.4s ease;
}
.kd-iz-card {
  box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
  transition: box-shadow 0.4s ease;
}
.kd-iz-card:hover img,
.kd-iz-card:focus-visible img {
  transform: scale(1.05);
}
.kd-iz-card:hover,
.kd-iz-card:focus-visible {
  box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
}
/* 動きを減らす設定の人には、滑らかに大きくする動きをなくして、すぐ切り替える */
@media (prefers-reduced-motion: reduce) {
  .kd-iz-card img {
    transition: none;
  }
  .kd-iz-card {
    transition: none;
  }
}

5. 丸い画像

丸く切り抜いた画像でも、同じ書き方で拡大できます。丸い枠の外には、はみ出しません。スタッフ紹介や、カテゴリーの入口に向いています。

自動で再生中

HTML

<a class="kd-iz kd-iz-round" href="#"><img src="https://www.kakeru-d.jp/wp-content/uploads/2026/10/css-image-hover-zoom-plant.jpg" alt="スタッフ紹介へ" width="800" height="800"></a>

CSS

/* 5種類に共通：枠からはみ出した部分を隠す */
.kd-iz {
  display: block;
  overflow: hidden;
  border-radius: 12px;
}
.kd-iz img {
  display: block;
  width: 100%;
  height: auto;
}
/* キーボードで選んだときの枠。消さずに、はっきり見せる */
.kd-iz:focus-visible {
  outline: 3px solid #0F172A;
  outline-offset: 3px;
}
.kd-iz-round {
  width: 180px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}
.kd-iz-round img {
  height: 100%;
  object-fit: cover;
}
.kd-iz-round img {
  transform: scale(1);
  transition: transform 0.4s ease;
}
.kd-iz-round:hover img,
.kd-iz-round:focus-visible img {
  transform: scale(1.12);
}
/* 動きを減らす設定の人には、滑らかに大きくする動きをなくして、すぐ切り替える */
@media (prefers-reduced-motion: reduce) {
  .kd-iz-round img {
    transition: none;
  }
}

※ WordPressのテーマによっては、本文の画像に余白や最大幅の指定が付いていて、見本どおりに見えないことがあります。そのときは、テーマ側の指定より強くなるよう、セレクタの頭に本文の枠のクラス（たとえば .entry-content）を足してください。

仕組み：枠はそのまま、中の画像だけを大きくする

このズームは、「枠」と「中の画像」を分けて考えるのがポイントです。HTMLでは、リンクの <a> が枠、その中の <img> が画像です。

transform: scale() で、画像を大きくする

scale(1.08) は「1.08倍に拡大する」という意味です。scale(1) が元の大きさで、1より小さくすると縮みます。

ここで大事なのは、transform で大きくしても、まわりの並びは崩れないことです。MDNでも、座標変換（transform）は、ふつうの並び（文書の流れ）を崩さずに形や位置を変えるもの、と説明されています。画像の width（横幅）を広げる方法だと、隣の画像や下の文字が押し出されて動きます。

overflow: hidden で、はみ出した部分を隠す

大きくなった画像は、そのままだと枠の外へはみ出します。枠の <a> に overflow: hidden を付けると、はみ出した部分が枠の線で切り取られます。その結果、枠の大きさは同じまま、中身だけが寄って見えるわけです。border-radius（角の丸み）を付けておけば、切り取りも角丸になります。5番目の丸い画像は、角の丸みを50%にして円にしています。

書いたもの	付ける場所	意味
overflow: hidden	枠（a）	はみ出した部分を隠す
transform: scale(1.08)	画像（img）	1.08倍に拡大する。まわりは動かない
transition: transform 0.4s ease	画像（img）	0.4秒かけて滑らかに変える
filter: brightness(.6)	画像（img）	明るさを60%に落とす（3番目）

乗せる場所と、動く場所は別でいい

CSSは .kd-iz-basic:hover img のように書いています。「枠に乗せたとき、中の画像を変える」という意味です。4番目のカードでは、この枠をカード全体にしたので、見出しの文字の上に乗せても画像が大きくなります。カードでは、画像を入れる .kd-iz-frame にも overflow: hidden を付けています。付けないと、大きくなった画像が下の見出しの上に重なります。

ここで使った transform は2015年9月から、overflow は2015年7月から、filter は2016年9月から、主要なブラウザで使える機能とMDNで示されています。丸い画像で使った object-fit は2020年1月から、aspect-ratio は2021年9月からです。

数値を変えるとどうなるか

「ふわっと拡大」の数値を1つずつ変えて並べました。ここの見本も、自動でくり返しています。

倍率：scale の数字

1.03倍

1.08倍
（見本）

1.3倍

1.03倍だと、変化に気づきにくくなります。1.3倍まで上げると、写真の端が大きく切れて、何の写真だったかが分からなくなります。一覧の画像なら1.05〜1.1倍あたりが、変化が見えて写真も崩れない、というのがKAKERUの判断です。拡大すると写真は少しぼやけるので、元の画像は表示する大きさより少し大きめに用意しておきます。

速さ：transition の秒数

0.15秒

0.4秒
（見本）

1.2秒

0.15秒だと、大きくなる途中が見えず、画像がぱっと切り替わったように見えます。1.2秒だと、一覧の上でマウスを動かしたとき、画像がいつまでも動き続けて落ち着きません。0.3〜0.5秒あたりが目安です。

overflow: hidden を付けないと

overflow:hidden
あり（見本）

overflow:hidden
なし

右は overflow: hidden を外したものです。画像が枠の外へ広がり、角の丸みもなくなります。隣の画像や文字の上に重なるので、一覧では使えません。ズームがうまくいかないときは、まずここを確かめます。

スマホと、見る人への配慮

スマホには「マウスを乗せる」がない

スマホは指で触るので、マウスを乗せている状態がありません。画像のズームは、スマホではほとんど見る機会がない、と考えておきます。だから、ズームしないと分からない情報を置かないことが大切です。3番目の見本で、文字を最初から出しているのはそのためです。

押したあとに画像が大きいまま残るのが気になるときは、@media (hover: hover) で囲むと、マウスのようにホバーできる機器のときだけ変化させられます。このときも、:focus-visible の指定は外に残しておきます。

@media (hover: hover) {
  .kd-iz-basic:hover img {
    transform: scale(1.08);
  }
}

画像の上の文字は、暗くしてから重ねる

3番目の見本は、普段から画像の明るさを80%に落とし、文字に影を付けています。明るい写真の上に白い文字をそのまま置くと、読めない部分が出ます。どの写真を入れても読めるかは、一番明るい写真で確かめます。画像の上に文字を重ねる方法は、この連載でもあらためて取り上げる予定です。

リンクの画像には、行き先が分かる alt を

画面の読み上げを使う人には、画像は alt（オルト＝代わりの文字）で伝わります。リンクになっている画像の alt には、「山の写真」ではなく「山の写真の一覧へ」のように、押すとどこへ行くかを書きます。3番目と4番目のように、リンクの中にすでに文字があるときは、同じ言葉が2回読まれないよう alt=""（空）にしています。

キーボードで選んだときも、同じ変化を

見本ではいつも、:hover と :focus-visible（フォーカス・ビジブル＝キーボードのTabキーなどで選んだ状態）を並べて書き、選んだときの枠（outline）も消さずに残しています。

「動きを減らす」設定の人には、すぐ切り替える

画面の動きが苦手な人は、スマホやパソコンで「動きを減らす」設定をオンにしていることがあります。CSSの prefers-reduced-motion を使うと、この設定の人にだけ別の見え方を出せます。見本では transition: none で滑らかに大きくなる動きをなくし、乗せたらすぐ切り替わる形にしています。

一覧の画像が全部ふわっと動くと、それだけで「ちゃんと作ったサイト」に見えます。
ただ、押せない写真まで動くと、押してしまう人が出ます。動かすのは、押せる画像だけと決めています。

応用：実際にマウスを乗せて試す

ここの見本は自動では動きません。パソコンならマウスを乗せて、キーボードならTabキーで1つずつ選んで、変化を確かめてみてください。

ギャラリーを見る

BLOG季節のおすすめプラン

AIに頼むなら

同じような動きは、Claudeなどの生成AIに頼んでもすぐ作れます。そのときは、見た目だけでなく、置き場所・数値・配慮まで伝えると、直す回数が減ります。

ブログの記事一覧のカードで、カードにマウスを乗せると画像が枠の中で1.05倍に大きくなる動きをつけたい。
HTMLとCSSだけで。0.4秒。まわりの並びが動かない書き方で、画像は枠からはみ出さないように。
キーボードで選んだときも同じ変化にして、動きを減らす設定の人には滑らかな動きをなくして。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

画像が枠からはみ出していないか。カードの見出しや隣の画像に重なっていたら、画像を包む枠に overflow: hidden があるかを見ます
拡大しすぎていないか。1.2倍を超えていると、写真の端が大きく切れます。スマホの幅でも、写真の大事な部分が見えているかを確かめます
押せない画像まで動いていないか。img:hover のように、サイトのすべての画像に効く書き方になっていたら、リンクの中の画像だけに絞ります

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

ブログの記事一覧・商品一覧・実績一覧には「カード全体に乗せる」。写真にも見出しにも反応するので、どこを押せばいいか迷いません
写真だけを大きく並べるギャラリーには「ふわっと拡大」。倍率は1.05〜1.1倍にとどめます
スタッフ紹介やカテゴリーの入口には「丸い画像」。四角い一覧と見分けがつき、「人」や「入口」だと伝わります

使わない場面

押せない写真や、記事の中の説明用の図。動くと押せると思われます。図はズームで端が切れると、読めなくなります
1つの一覧で、ズームと別の動きを何種類も混ぜる。一覧の中は1種類にそろえます
大事な文字が入った画像（バナー）。拡大で端の文字が切れることがあります

画像のズームは「この写真は押せます」と伝えるための合図です。
きれいに見せるための飾りではなく、押せる場所の目印として使うと、迷いません。

まとめ

画像にマウスを乗せるとズームする動きは、CSSだけで作れる。JavaScriptは要らない
枠に overflow: hidden、中の画像に transform: scale() と transition を付ける
transform はまわりの並びを崩さない。倍率は1.05〜1.1倍、速さは0.3〜0.5秒が目安
スマホでは見えないので、ズームしないと分からない情報を置かない
リンクの画像には行き先が分かる alt を付け、:focus-visible も並べて書く

まずは「ふわっと拡大」のコードをコピーして、scale(1.08) の数字を変えてみてください。数字1つで、印象が大きく変わるのが分かります。

参考にした資料

いずれも2026年10月11日に確認しました。ブラウザの対応状況は変わることがあります。最新の情報は各ページでご確認ください。

MDN「transform」
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/transform
※要素の拡大・回転・移動の指定、ブラウザの対応状況
MDN「scale()」
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Values/transform-function/scale
※拡大・縮小の倍率の書き方
MDN「CSS 座標変換の使用」
https://developer.mozilla.org/ja/docs/Web/CSS/Guides/Transforms/Using
※座標変換は、ふつうの並び（文書の流れ）を崩さずに形や位置を変えること
MDN「overflow」
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/overflow
※hidden で、はみ出した部分を枠で切ること、対応状況
MDN「transition」
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/transition
※変化を滑らかにする指定、対応状況
MDN「filter」
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/filter
※brightness() で明るさを変える指定、対応状況
MDN「object-fit」
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/object-fit
※画像を枠いっぱいに収める指定、対応状況
MDN「aspect-ratio」
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/aspect-ratio
※縦横の比率を決める指定、対応状況
MDN「:focus-visible」
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Selectors/:focus-visible
※キーボード操作などで選んだときに当てはまること、対応状況
MDN「hover」（メディア特性）
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/At-rules/@media/hover
※ホバーできる機器かを調べる書き方
MDN「prefers-reduced-motion」
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion
※値の意味、OSごとの設定、対応状況
MDN「: 画像埋め込み要素」
https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/img
※alt属性の書き方。リンクやボタンの中の画像は、押すと何が起きるかを alt に書くこと

ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。

下線が伸びるリンクをCSSだけでコピペで使える5種類と、文章の中のリンクの注意点

2026.10.09

マウスを乗せると動くボタンをCSSだけでコピペで使える5種類と、スマホ・キーボードへの配慮

2026.10.07

2026.10.06

関連記事【filter】CSSでhover時に画像を白黒反転させる

2024.10.18

画像に乗せるとズームする動きをCSSだけで｜コピペで使える5種類と、まわりを崩さない書き方

完成見本：画像のズーム5種類

コピペ用のコード

1. ふわっと拡大

2. 寄りから引きへ

3. 拡大＋少し暗く

4. カード全体に乗せる

5. 丸い画像

仕組み：枠はそのまま、中の画像だけを大きくする

transform: scale() で、画像を大きくする

overflow: hidden で、はみ出した部分を隠す

乗せる場所と、動く場所は別でいい

数値を変えるとどうなるか

倍率：scale の数字

速さ：transition の秒数

overflow: hidden を付けないと

スマホと、見る人への配慮

スマホには「マウスを乗せる」がない

画像の上の文字は、暗くしてから重ねる

リンクの画像には、行き先が分かる alt を

キーボードで選んだときも、同じ変化を

「動きを減らす」設定の人には、すぐ切り替える

応用：実際にマウスを乗せて試す

AIに頼むなら

KAKERUならこう使う／使わない

使う場面

使わない場面

まとめ

参考にした資料

関連記事

コメントを残すコメントをキャンセル

「あの資料、どこ？」が、なくなる。

カタログを”読むだけ”で終わらせない。

いつものコピペをもっと自由に。

人気記事

オススメリンク

完成見本：画像のズーム5種類

コピペ用のコード

1. ふわっと拡大

2. 寄りから引きへ

3. 拡大＋少し暗く

4. カード全体に乗せる

5. 丸い画像

仕組み：枠はそのまま、中の画像だけを大きくする

transform: scale() で、画像を大きくする

overflow: hidden で、はみ出した部分を隠す

乗せる場所と、動く場所は別でいい

数値を変えるとどうなるか

倍率：scale の数字

速さ：transition の秒数

overflow: hidden を付けないと

スマホと、見る人への配慮

スマホには「マウスを乗せる」がない

画像の上の文字は、暗くしてから重ねる

リンクの画像には、行き先が分かる alt を

キーボードで選んだときも、同じ変化を

「動きを減らす」設定の人には、すぐ切り替える

応用：実際にマウスを乗せて試す

AIに頼むなら

KAKERUならこう使う／使わない

使う場面

使わない場面

まとめ

参考にした資料

関連記事

コメントを残す コメントをキャンセル

「あの資料、どこ？」が、なくなる。

カタログを”読むだけ”で終わらせない。

いつものコピペをもっと自由に。

人気記事

オススメリンク

コメントを残すコメントをキャンセル