コピペで使える画像ホバーエフェクト20個まとめ（マウスを乗せると動く画像）

商品一覧やブログの記事一覧で、画像にマウスを乗せた時に少し動きがあると、「クリックできる」ことが伝わりやすくなります。

この記事では、コピペするだけで使える画像のホバーエフェクトを20個まとめました。
定番の拡大から、暗くなって文字が出る、白黒からカラーへ、下からキャプション、光が走る効果まで、場面ごとに使い分けられる種類を用意しています。

どれもHTMLとCSSだけで動くので、JavaScriptは必要ありません。
これまでの記事と同じく、HTMLとCSSを分けて掲載しています。

ホバーって何のこと？

マウスのカーソルを上に乗せることだよ。サンプルは画像のかわりに色の四角で作っているから、マウスを乗せて動きを試してみてね。

使い方｜HTMLとCSSをそれぞれ貼り付ける

CSSのコードを、サイトのスタイルシートに追加します。続いて、HTMLのコードを、画像を表示したい場所に貼り付けます。

サンプルは色のグラデーションで画像のかわりをしています。実際に使う時は、CSSの「〇〇-img」のbackgroundを、background: url(画像のURL) center / cover; に書き換え、HTMLの中の絵文字を消してください。
キャプションの文字は「〇〇-cap」の中を書き換えます。

01. ふわっと拡大

マウスを乗せると画像がゆっくり大きくなる、もっとも定番の効果です。

実際の見た目

🌿

HTMLコード

<div class="kts-hover01">
  <div class="kts-hover01-img">🌿</div>
</div>

CSSコード

.kts-hover01 { position: relative; width: 100%; max-width: 300px; height: 200px; overflow: hidden; border-radius: 10px; cursor: pointer;  font-family: sans-serif; }
.kts-hover01-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(135deg, #34D399, #3B82F6); /* 実際は background: url(画像のURL) center / cover; */  }
.kts-hover01-img { transition: transform .5s; }
.kts-hover01:hover .kts-hover01-img { transform: scale(1.1); }

02. 暗くなって文字が出る

画像が暗くなり、中央に文字が浮かび上がる効果です。

実際の見た目

🌿
季節のおすすめ

HTMLコード

<div class="kts-hover02">
  <div class="kts-hover02-img">🌿</div>
  <div class="kts-hover02-cap">季節のおすすめ</div>
</div>

CSSコード

.kts-hover02 { position: relative; width: 100%; max-width: 300px; height: 200px; overflow: hidden; border-radius: 10px; cursor: pointer;  font-family: sans-serif; }
.kts-hover02-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(135deg, #F472B6, #FB923C); /* 実際は background: url(画像のURL) center / cover; */  }
.kts-hover02-cap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; font-size: 18px; font-weight: 700; opacity: 0; transition: opacity .4s; }
.kts-hover02:hover .kts-hover02-cap { opacity: 1; }

03. 下からキャプションが出る

画像の下から説明の帯がすっと出てくる効果です。

実際の見た目

🌿
季節のおすすめ

HTMLコード

<div class="kts-hover03">
  <div class="kts-hover03-img">🌿</div>
  <div class="kts-hover03-cap">季節のおすすめ</div>
</div>

CSSコード

.kts-hover03 { position: relative; width: 100%; max-width: 300px; height: 200px; overflow: hidden; border-radius: 10px; cursor: pointer;  font-family: sans-serif; }
.kts-hover03-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(135deg, #A78BFA, #60A5FA); /* 実際は background: url(画像のURL) center / cover; */  }
.kts-hover03-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; background: rgba(17,24,39,.8); color: #fff; font-size: 15px; font-weight: 700; transform: translateY(100%); transition: transform .4s; }
.kts-hover03:hover .kts-hover03-cap { transform: translateY(0); }

04. 白黒からカラーへ

最初は白黒で、マウスを乗せるとカラーになる効果です。

実際の見た目

🌿

HTMLコード

<div class="kts-hover04">
  <div class="kts-hover04-img">🌿</div>
</div>

CSSコード

.kts-hover04 { position: relative; width: 100%; max-width: 300px; height: 200px; overflow: hidden; border-radius: 10px; cursor: pointer;  font-family: sans-serif; }
.kts-hover04-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(135deg, #FBBF24, #F87171); /* 実際は background: url(画像のURL) center / cover; */  }
.kts-hover04-img { filter: grayscale(100%); transition: filter .5s; }
.kts-hover04:hover .kts-hover04-img { filter: grayscale(0); }

05. ぼかしが取れる

最初は少しぼやけていて、マウスを乗せるとくっきりする効果です。

実際の見た目

🌿
季節のおすすめ

HTMLコード

<div class="kts-hover05">
  <div class="kts-hover05-img">🌿</div>
  <div class="kts-hover05-cap">季節のおすすめ</div>
</div>

CSSコード

.kts-hover05 { position: relative; width: 100%; max-width: 300px; height: 200px; overflow: hidden; border-radius: 10px; cursor: pointer;  font-family: sans-serif; }
.kts-hover05-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(135deg, #34D399, #3B82F6); /* 実際は background: url(画像のURL) center / cover; */  }
.kts-hover05-img { filter: blur(4px); transform: scale(1.05); transition: filter .5s; }
.kts-hover05-cap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 700; text-shadow: 0 2px 6px rgba(0,0,0,.4); transition: opacity .5s; }
.kts-hover05:hover .kts-hover05-img { filter: blur(0); }
.kts-hover05:hover .kts-hover05-cap { opacity: 0; }

06. 浮き上がって影が付く

画像全体が少し浮き上がり、影が広がる効果です。カード一覧に向いています。

実際の見た目

🌿

HTMLコード

<div class="kts-hover06">
  <div class="kts-hover06-img">🌿</div>
</div>

CSSコード

.kts-hover06 { position: relative; width: 100%; max-width: 300px; height: 200px; overflow: hidden; border-radius: 10px; cursor: pointer; overflow: visible; transition: transform .3s, box-shadow .3s; font-family: sans-serif; }
.kts-hover06-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(135deg, #F472B6, #FB923C); /* 実際は background: url(画像のURL) center / cover; */ border-radius: 10px; }
.kts-hover06:hover { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(0,0,0,.18); }

07. 枠線が現れる

マウスを乗せると、画像の内側に白い枠線が現れる上品な効果です。

実際の見た目

🌿

HTMLコード

<div class="kts-hover07">
  <div class="kts-hover07-img">🌿</div>
</div>

CSSコード

.kts-hover07 { position: relative; width: 100%; max-width: 300px; height: 200px; overflow: hidden; border-radius: 10px; cursor: pointer;  font-family: sans-serif; }
.kts-hover07-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(135deg, #A78BFA, #60A5FA); /* 実際は background: url(画像のURL) center / cover; */  }
.kts-hover07::after { content: ""; position: absolute; inset: 12px; border: 2px solid #fff; opacity: 0; transform: scale(1.1); transition: opacity .4s, transform .4s; pointer-events: none; }
.kts-hover07:hover::after { opacity: 1; transform: scale(1); }

08. 少し傾く

画像がほんの少し傾きながら拡大する、動きのある効果です。

実際の見た目

🌿

HTMLコード

<div class="kts-hover08">
  <div class="kts-hover08-img">🌿</div>
</div>

CSSコード

.kts-hover08 { position: relative; width: 100%; max-width: 300px; height: 200px; overflow: hidden; border-radius: 10px; cursor: pointer;  font-family: sans-serif; }
.kts-hover08-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(135deg, #FBBF24, #F87171); /* 実際は background: url(画像のURL) center / cover; */  }
.kts-hover08-img { transition: transform .5s; }
.kts-hover08:hover .kts-hover08-img { transform: scale(1.12) rotate(3deg); }

09. 色が重なる

画像の上にテーマカラーが重なる、サイトの雰囲気をそろえやすい効果です。

実際の見た目

🌿
季節のおすすめ

HTMLコード

<div class="kts-hover09">
  <div class="kts-hover09-img">🌿</div>
  <div class="kts-hover09-cap">季節のおすすめ</div>
</div>

CSSコード

.kts-hover09 { position: relative; width: 100%; max-width: 300px; height: 200px; overflow: hidden; border-radius: 10px; cursor: pointer;  font-family: sans-serif; }
.kts-hover09-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(135deg, #34D399, #3B82F6); /* 実際は background: url(画像のURL) center / cover; */  }
.kts-hover09-cap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(37,99,235,.75); color: #fff; font-size: 18px; font-weight: 700; opacity: 0; transition: opacity .4s; }
.kts-hover09:hover .kts-hover09-cap { opacity: 1; }

10. 左から文字がスライド

説明の文字が左からすっと入ってくる効果です。

実際の見た目

🌿
季節のおすすめ

HTMLコード

<div class="kts-hover10">
  <div class="kts-hover10-img">🌿</div>
  <div class="kts-hover10-cap">季節のおすすめ</div>
</div>

CSSコード

.kts-hover10 { position: relative; width: 100%; max-width: 300px; height: 200px; overflow: hidden; border-radius: 10px; cursor: pointer;  font-family: sans-serif; }
.kts-hover10-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(135deg, #F472B6, #FB923C); /* 実際は background: url(画像のURL) center / cover; */  }
.kts-hover10-cap { position: absolute; left: 0; bottom: 20px; padding: 10px 18px; background: #fff; color: #111827; font-weight: 700; transform: translateX(-100%); transition: transform .4s; }
.kts-hover10:hover .kts-hover10-cap { transform: translateX(0); }

11. カーテンが開く

左右から閉じていた幕が開くように、画像が現れる効果です。

実際の見た目

🌿
OPEN

HTMLコード

<div class="kts-hover11">
  <div class="kts-hover11-img">🌿</div>
  <div class="kts-hover11-cap">OPEN</div>
</div>

CSSコード

.kts-hover11 { position: relative; width: 100%; max-width: 300px; height: 200px; overflow: hidden; border-radius: 10px; cursor: pointer;  font-family: sans-serif; }
.kts-hover11-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(135deg, #A78BFA, #60A5FA); /* 実際は background: url(画像のURL) center / cover; */  }
.kts-hover11-cap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; font-weight: 800; letter-spacing: .2em; background: linear-gradient(90deg, #111827 50%, #1F2937 50%); transition: clip-path .5s; clip-path: inset(0 0 0 0); }
.kts-hover11:hover .kts-hover11-cap { clip-path: inset(0 50% 0 50%); }

12. 円形に広がる

中心から円が広がるように、色が現れる効果です。

実際の見た目

🌿
季節のおすすめ

HTMLコード

<div class="kts-hover12">
  <div class="kts-hover12-img">🌿</div>
  <div class="kts-hover12-cap">季節のおすすめ</div>
</div>

CSSコード

.kts-hover12 { position: relative; width: 100%; max-width: 300px; height: 200px; overflow: hidden; border-radius: 10px; cursor: pointer;  font-family: sans-serif; }
.kts-hover12-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(135deg, #FBBF24, #F87171); /* 実際は background: url(画像のURL) center / cover; */  }
.kts-hover12-cap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(236,72,153,.85); color: #fff; font-size: 18px; font-weight: 700; clip-path: circle(0% at 50% 50%); transition: clip-path .5s; }
.kts-hover12:hover .kts-hover12-cap { clip-path: circle(75% at 50% 50%); }

13. 光が走る

画像の上を斜めに光がすっと横切る、ツヤのある効果です。

実際の見た目

🌿

HTMLコード

<div class="kts-hover13">
  <div class="kts-hover13-img">🌿</div>
</div>

CSSコード

.kts-hover13 { position: relative; width: 100%; max-width: 300px; height: 200px; overflow: hidden; border-radius: 10px; cursor: pointer;  font-family: sans-serif; }
.kts-hover13-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(135deg, #34D399, #3B82F6); /* 実際は background: url(画像のURL) center / cover; */  }
.kts-hover13::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-20deg); pointer-events: none; }
.kts-hover13:hover::after { left: 125%; transition: left .7s; }

14. ずらした枠線

画像の後ろにずらした枠線を置き、マウスを乗せると重なる効果です。

実際の見た目

🌿

HTMLコード

<div class="kts-hover14">
  <div class="kts-hover14-img">🌿</div>
</div>

CSSコード

.kts-hover14 { position: relative; width: 100%; max-width: 300px; height: 200px; overflow: hidden; border-radius: 10px; cursor: pointer; overflow: visible; margin: 0 14px 14px 0; font-family: sans-serif; }
.kts-hover14-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(135deg, #F472B6, #FB923C); /* 実際は background: url(画像のURL) center / cover; */ position: relative; z-index: 1; border-radius: 10px; transition: transform .3s; }
.kts-hover14::before { content: ""; position: absolute; inset: 0; border: 2px solid #111827; border-radius: 10px; transform: translate(12px, 12px); transition: transform .3s; }
.kts-hover14:hover::before { transform: translate(0, 0); }

15. 明るくなる

マウスを乗せると画像が少し明るくなる、控えめな効果です。

実際の見た目

🌿

HTMLコード

<div class="kts-hover15">
  <div class="kts-hover15-img">🌿</div>
</div>

CSSコード

.kts-hover15 { position: relative; width: 100%; max-width: 300px; height: 200px; overflow: hidden; border-radius: 10px; cursor: pointer;  font-family: sans-serif; }
.kts-hover15-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(135deg, #A78BFA, #60A5FA); /* 実際は background: url(画像のURL) center / cover; */  }
.kts-hover15-img { filter: brightness(.85); transition: filter .4s; }
.kts-hover15:hover .kts-hover15-img { filter: brightness(1.1); }

16. ズームアウト

最初は拡大されていて、マウスを乗せると元の大きさに戻る効果です。

実際の見た目

🌿

HTMLコード

<div class="kts-hover16">
  <div class="kts-hover16-img">🌿</div>
</div>

CSSコード

.kts-hover16 { position: relative; width: 100%; max-width: 300px; height: 200px; overflow: hidden; border-radius: 10px; cursor: pointer;  font-family: sans-serif; }
.kts-hover16-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(135deg, #FBBF24, #F87171); /* 実際は background: url(画像のURL) center / cover; */  }
.kts-hover16-img { transform: scale(1.2); transition: transform .6s; }
.kts-hover16:hover .kts-hover16-img { transform: scale(1); }

17. アイコンが現れる

中央に「＋」のアイコンが現れて、クリックできることを伝える効果です。

実際の見た目

🌿
＋

HTMLコード

<div class="kts-hover17">
  <div class="kts-hover17-img">🌿</div>
  <div class="kts-hover17-cap">＋</div>
</div>

CSSコード

.kts-hover17 { position: relative; width: 100%; max-width: 300px; height: 200px; overflow: hidden; border-radius: 10px; cursor: pointer;  font-family: sans-serif; }
.kts-hover17-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(135deg, #34D399, #3B82F6); /* 実際は background: url(画像のURL) center / cover; */  }
.kts-hover17-cap { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: #111827; font-size: 28px; font-weight: 700; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .3s; }
.kts-hover17:hover .kts-hover17-cap { opacity: 1; transform: scale(1); }

18. タイトルと説明が順に出る

タイトルが出たあとに、少し遅れて説明文が現れる凝った効果です。

実際の見た目

🌿
季節のおすすめ春の新作が入荷しました

HTMLコード

<div class="kts-hover18">
  <div class="kts-hover18-img">🌿</div>
  <div class="kts-hover18-cap"><span class="kts-hover18-title">季節のおすすめ</span><span class="kts-hover18-text">春の新作が入荷しました</span></div>
</div>

CSSコード

.kts-hover18 { position: relative; width: 100%; max-width: 300px; height: 200px; overflow: hidden; border-radius: 10px; cursor: pointer;  font-family: sans-serif; }
.kts-hover18-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(135deg, #F472B6, #FB923C); /* 実際は background: url(画像のURL) center / cover; */  }
.kts-hover18-cap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,.5); color: #fff; opacity: 0; transition: opacity .4s; }
.kts-hover18-title, .kts-hover18-text { transform: translateY(14px); opacity: 0; transition: transform .4s, opacity .4s; }
.kts-hover18-title { font-size: 18px; font-weight: 800; }
.kts-hover18-text { margin-top: 6px; font-size: 13px; transition-delay: .15s; }
.kts-hover18:hover .kts-hover18-cap { opacity: 1; }
.kts-hover18:hover .kts-hover18-title, .kts-hover18:hover .kts-hover18-text { transform: translateY(0); opacity: 1; }

19. 丸い画像が拡大

丸く切り抜いた画像が、ふわっと大きくなる効果です。プロフィール写真に向いています。

実際の見た目

🐶

HTMLコード

<div class="kts-hover19">
  <div class="kts-hover19-img">🐶</div>
</div>

CSSコード

.kts-hover19 { position: relative; width: 100%; max-width: 300px; height: 200px; overflow: hidden; border-radius: 50%; cursor: pointer; max-width: 180px; height: 180px; font-family: sans-serif; }
.kts-hover19-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(135deg, #A78BFA, #60A5FA); /* 実際は background: url(画像のURL) center / cover; */  }
.kts-hover19-img { transition: transform .4s; }
.kts-hover19:hover .kts-hover19-img { transform: scale(1.12); }
.kts-hover19 { box-shadow: 0 0 0 4px #fff, 0 0 0 6px #F59E0B; }

20. セピア色から元に戻る

最初は懐かしいセピア色で、マウスを乗せると元の色に戻る効果です。

実際の見た目

🌿

HTMLコード

<div class="kts-hover20">
  <div class="kts-hover20-img">🌿</div>
</div>

CSSコード

.kts-hover20 { position: relative; width: 100%; max-width: 300px; height: 200px; overflow: hidden; border-radius: 10px; cursor: pointer;  font-family: sans-serif; }
.kts-hover20-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(135deg, #FBBF24, #F87171); /* 実際は background: url(画像のURL) center / cover; */  }
.kts-hover20-img { filter: sepia(90%); transition: filter .5s; }
.kts-hover20:hover .kts-hover20-img { filter: sepia(0); }

カスタマイズの小ワザ

  • 画像を入れる時は、「〇〇-img」のbackgroundに url(画像のURL) center / cover を指定してください。CSSの中にコメントで書き方を残しています。
  • imgタグを使いたい場合は、「〇〇-img」の中に<img src=”画像のURL” alt=”説明”>を入れ、CSSで width:100%; height:100%; object-fit:cover; を指定してください。
  • スマホにはマウスがないため、ホバーの効果は表示されません。キャプションなど大事な情報は、ホバーしなくても見える場所にも書いておきましょう。
  • 動きの速さは、transitionの秒数（.5sなど）で変えられます。
  • 画像の大きさは、CSSの一番上のmax-widthとheightで変えられます。

まとめ｜早見表

使いたい場面該当するエフェクト
定番の動き01, 16
文字を重ねたい02, 03, 09, 10, 18
色の変化で見せる04, 15, 20
ぼかし05
カード一覧06, 14
上品に見せたい07, 13
動きで目を引く08, 11, 12
クリックできると伝える17
プロフィール写真19

マウスを乗せるだけで動くと、つい触りたくなるね！

そうなんだ。ただ、スマホではホバーが効かないから、大事な情報は動かさなくても見えるようにしておこうね。

20個の画像ホバーエフェクトは、HTMLとCSSだけで動く。画像はbackgroundにurlを指定して入れ、スマホではホバーが効かないため大事な情報は常に見える場所にも書いておく。

関連記事

  1. LPとは？普通のWebサイトとの違いを徹底解説

  2. コピペで使えるアイコン付きリスト・チェックリスト20個まとめ

  3. コピペで使える区切り線（セパレーター）20個まとめ（波線・グラデーションなど）

  4. コピペで使えるページネーション20個まとめ（記事一覧のページ送りボタン）

  5. コピペで使えるSNSシェアボタン20個まとめ（記事の最後に置く「シェアしてね」ボタンに）

  6. LPの構成要素と作り方の基本(ファーストビュー・CTAなど)

  7. コピペで使えるテキストマーカー・文字装飾20個まとめ（蛍光ペン・下線・強調）

  8. コピペで使える目次デザイン20個まとめ（HTML・CSSで作る記事の目次）

  9. レスポンシブデザインとは？スマホ対応で失敗しやすいポイント