Tailwind Group Hover Card

DEMO

CODE

<div class="demo-stage tgh-stage"><div class="tgh-card"><div class="tgh-img">IMAGE</div><div class="tgh-overlay"><span class="tgh-title">VIEW PROJECT</span><span class="tgh-arrow">→</span></div></div></div>

.tgh-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.tgh-card { position:relative; width:240px; height:160px; border-radius:16px; overflow:hidden; cursor:pointer; }
.tgh-img { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#7b37a8,#e91b89); color:rgba(255,255,255,.55); font-family:'Oswald',sans-serif; letter-spacing:.2em; }
.tgh-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; background:rgba(15,15,18,.78); color:#fff; font-family:'Oswald',sans-serif; letter-spacing:.15em; opacity:0; transition:opacity .35s ease; }
.tgh-card:hover .tgh-overlay { opacity:1; }
.tgh-arrow { font-size:1.5rem; transform:translateY(8px); transition:transform .35s ease; }
.tgh-card:hover .tgh-arrow { transform:translateY(0); }

上のライブデモはTailwind不要のCSS等価版です。下は group / group-hover（親ホバーで子を制御するTailwind定番）で同じ動きになります。

<div class="group relative w-60 h-40 rounded-2xl overflow-hidden cursor-pointer">
  <div class="w-full h-full bg-gradient-to-br from-purple-600 to-pink-500"></div>
  <div class="absolute inset-0 flex flex-col items-center justify-center gap-2
              bg-gray-950/80 text-white opacity-0 transition
              group-hover:opacity-100">
    <span class="tracking-widest">VIEW PROJECT</span>
    <span class="text-2xl translate-y-2 transition group-hover:translate-y-0">→</span>
  </div>
</div>

AI PROMPT

ホバーで半透明オーバーレイとCTAが浮かぶギャラリーカードをTailwindで作って。親に group relative w-60 h-40 rounded-2xl overflow-hidden を付け、中に画像 bg-gradient-to-br from-purple-600 to-pink-500。オーバーレイは absolute inset-0 で重ね、bg-gray-950/80 text-white opacity-0 transition group-hover:opacity-100 で親ホバー時にフェードイン。中の矢印は translate-y-2 group-hover:translate-y-0 で少し上にスライド。group/group-hover はTailwindの代表機能。ポートフォリオ・実績カードに。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。