CSSだけで実装！ホバーで拡大＆テキスト表示するカード型ギャラリーデザインの作り方

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

写真や作品を並べたギャラリー、商品一覧、ポートフォリオ…。
そんな“カード型レイアウト”で、マウスホバーしたときに「ふわっと拡大してテキストが表示される」ギャラリー、見たことありませんか？

これはただの装飾じゃなくて、
ユーザーが「見たい！」と感じたときに情報が自然と現れるインタラクションなんです。

今回は、CSSだけで実装可能な「ホバーで拡大＋テキスト表示」カードギャラリーの作り方をご紹介します。

コピペですぐ使えるコード付きで解説します！

完成イメージ：カードが拡大して、説明テキストが表示される

という、視線誘導しやすいUXの高い演出になります。

実際のコード

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

HTML：カードギャラリーの基本構造

<div class="gallery">
  <div class="card">
    <img src="sample.jpg" alt="サンプル画像">
    <div class="card-text">作品タイトルや説明</div>
  </div>
</div>

.card の中に画像と、上に重ねる .card-text を配置します。
ここでは1枚だけですが、複数並べてもOKです。

CSS：ホバーで拡大＋テキスト表示

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
}

.card {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  cursor: pointer;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.card-text {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 1em;
  transform: translateY(100%);
  transition: transform 0.4s ease;
}

.card:hover img {
  transform: scale(1.1);
}

.card:hover .card-text {
  transform: translateY(0);
}

たったこれだけで、見た目も体験もリッチなカードUIが完成します！

応用パターン：上部にタイトル、中央に説明文を表示

中に入れるテキストレイアウトを変えたいときは、.card-text の中を自由に構成できます。

<div class="card-text">
  <h3>作品タイトル</h3>
  <p>この作品についての説明をここに入れます。</p>
</div>

CSSで text-align: center; や display: flex; align-items: center; を使えば、縦横中央に配置も可能です。

まとめ：「動き＋情報」で伝わるギャラリーを

画像だけを並べるよりも、ちょっとした動きとテキストの表示があるだけで、
ユーザーは自然とその作品や商品に興味を持ってくれます。

“静”と“動”を組み合わせたインタラクションで、
ぜひあなたのWebサイトにも「ちょっとプロっぽいカードギャラリー」を取り入れてみてください！

 

satokotadesignキャンペーン実施中！