5分で画像のホバーエフェクト実装6選 💡
👇️ 画像にカーソルで触れてみてください 👇️
画像幅の中で拡大する
コードを見る
HTML
<a href="#" class="img-zoom-container">
<img src="https://placehold.jp/3d4070/ffffff/300x200.png" alt="">
</a>CSS
.img-zoom-container {
overflow: hidden;
display: inline-block;
}
.img-zoom-container img {
display: block;
transition: transform 0.4s ease;
}
.img-zoom-container:hover img {
transform: scale(1.1);
}💡 ワンポイント解説：overflow: hidden;を記述しないと、画像が拡大した際にはみ出してしまいます。
影をつけて浮かび上がらせる
コードを見る
HTML
<a href="#" class="img-float-container">
<img src="https://placehold.jp/3d4070/ffffff/300x200.png" alt="" class="hover-float">
</a>CSS
.img-float-container {
display: inline-block;
}
.hover-float {
display: block;
width: 100%;
height: auto;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-float:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}少し明るくなる
コードを見る
HTML
<a href="#" class="img-brightness-container">
<img src="https://placehold.jp/3d4070/ffffff/300x200.png" alt="" class="hover-bright">
</a>CSS
.img-brightness-container {
display: inline-block;
overflow: hidden;
}
.hover-bright {
display: block;
width: 100%;
height: auto;
transition: filter 0.3s ease;
}
.hover-bright:hover {
filter: brightness(1.2);
}💡 ワンポイント解説：opacity: 0.8; でもいいのですが、z-indexなどで重なっている要素で使うと背景の色が透けてしまいます。そういう時にはfilter: blightness();と使い分けるのがポイントです。
ホバーすると文字やリンクが出る
コードを見る
HTML
<div class="img-menu-container">
<img src="https://placehold.jp/3d4070/ffffff/300x200.png" alt="">
<div class="img-menu-overlay">
<p class="img-menu-desc">短い文字</p>
<div class="img-menu-links">
<a href="#" class="img-menu-link">リンク1</a>
<a href="#" class="img-menu-link">リンク2</a>
</div>
</div>
</div>CSS
.img-menu-container {
position: relative;
display: inline-block;
overflow: hidden;
}
.img-menu-container img {
display: block;
width: 100%;
height: auto;
}
.img-menu-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column; /* 要素を縦に並べる */
justify-content: center;
align-items: center;
gap: 15px; /* 要素同士の隙間をあける */
opacity: 0;
transition: opacity 0.4s ease;
}
.img-menu-container:hover .img-menu-overlay {
opacity: 1;
}
.img-menu-desc {
color: #fff;
margin: 0;
font-size: 14px;
}
.img-menu-links {
display: flex;
gap: 10px; /* リンク同士を横に並べて隙間をあける */
}
.img-menu-link {
color: #fff;
border: 1px solid #fff;
padding: 8px 16px;
text-decoration: none;
font-size: 13px;
transition: background 0.3s, color 0.3s;
}
.img-menu-link:hover {
background: #fff;
color: #000;
}ぼかして文字にフォーカスする
コードを見る
HTML
<a class="filter-container">
<img src="https://placehold.jp/3d4070/ffffff/300x200.png" alt="" class="hover-blur">
<p class="overlay-text">詳しく見る</p>
</a>CSS
.filter-container {
position: relative;
overflow: hidden;
}
.hover-blur {
transition: filter 0.3s;
filter: grayscale(100%) brightness(0.3);
}
.filter-container:hover .hover-blur {
filter: grayscale(100%) brightness(0.3) blur(4px);
}
.overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-weight: bold;
}
💡ワンポイント解説：
複数のプロパティを使うことができますが、「通常時」と「ホバー時」の両方にフィルターを指定しないと、意図しないところでぼかしになったりします。
彩度を上げて深みを増す
コードを見る
HTML
<a href="#">
<img src="https://placehold.jp/3d4070/ffffff/300x200.png" alt="" class="filter-saturate">
</a>CSS
.filter-saturate {
transition: filter 0.3s;
}
.filter-saturate:hover {
filter: saturate(1.2);
}💡「彩度」のワンポイント解説：
お料理や食材の画像では、間違ってもホバー前には指定しないこと。実際と色味が違うとクレームの対象になります。
filter（フィルター）プロパティとは？
CSSだけで画像の色味を自由自在に操れるプロパティです。プロパティとは、その要素のどこを変えたいかという『項目名』のこと。お家で例えるなら、リビングの壁の色と高さ。この『色』と『高さ』という項目をプロパティといいます。
特に実務で使うことが多いのは以下の4つです。
| プロパティ名 | 効果 | 数値の目安 | 活用例 |
| brightness() | 明るさ調整 | 0.3 〜 1.2 暗 → 明 | 定番のホバー演出。画像＆文字に使える。 |
| blur() | ぼかし | 4px 〜 6px | 文字を読みやすくするための下地作りに。 |
| saturate() | 彩度 | 1.1 〜 1.3 | ホバー時の食品や景色を「鮮やか」にする。 |
| grayscale() | 白黒 | 100% | 完売表示に使える。 |
grayscale()の便利な小技
Sold Out
白黒の写真演出だけだと使い道が限られると思われがちな「モノクロ効果」。
実は、完売（Sold Out）した商品などの「状態表示」にめちゃくちゃ使えます！💡
クラスを1つ付与するだけで画像を一括で切り替えできるので、JavaScriptやPHPと組み合わせる実務現場でも非常に重宝されるテクニックです。
コードを見る
HTML
<div class="filter-container is-soldout">
<img src="https://placehold.jp/3d4070/ffffff/300x200.png" alt="" class="filter-gray">
<span class="soldout-badge">Sold Out</span>
</div>CSS
.filter-container {
position: relative;
overflow: hidden;
display: inline-block;
}
.filter-gray {
display: block;
width: 100%;
filter: grayscale(100%);
transition: filter 0.3s;
}
.soldout-badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
background: rgba(0, 0, 0, 0.7);
padding: 8px 16px;
font-weight: bold;
pointer-events: none;
}スマホでホバーが“効きっぱなし”になる時 ❗️
スマホでは、一度指でタップした画像がずっと「拡大したまま」「半透明になったまま」になってしまうという現象がよく起こります。
これは、スマホには「マウスを乗せる」という概念が無いためです。
@media (hover: hover) {
.img-zoom-container {
overflow: hidden;
display: inline-block;
}
.img-zoom-container img {
display: block;
transition: transform 0.4s ease;
}
.img-zoom-container:hover img {
transform: scale(1.1);
}
}👆️ 防ぐにはこのように @media (hover: hover) で丸ごと囲むことで、スマホユーザーに違和感を与えず、PCユーザーにはリッチな体験をお届けすることができます。
おわりに
今回は、忙しいコーダーさんのための時短テクニックとしてCSSオンリーのエフェクトをご紹介させていただきました😆
この記事でご紹介したホバーエフェクトは筆者のCodePenアカウントでも公開しています 👇️
See the Pen 2026年2月最新版【CSSだけ！】画像のホバーエフェクト by N Katsumata (@nk-codepen) on CodePen.
もしよろしければ、他のコピペシリーズもご覧くださいね 👇️
