# ホバーで詳細が現れるカードのCSS実装

> ホバーまたはキーボードフォーカスで、下からオーバーレイがスライドして詳細が現れるカード。focus-within対応でキーボードでも使えます。

- カテゴリ: カード
- URL: https://www.css-dictionary.com/recipes/hover-reveal-card/

## HTML

```html
<article class="reveal-card">
  <div class="media" aria-hidden="true"></div>
  <h3 class="caption">京都の路地</h3>
  <div class="overlay">
    <p>石畳の続く先斗町の小径。夕暮れの提灯が灯る時間帯が見頃です。</p>
    <a href="#">詳しく見る</a>
  </div>
</article>
```

## CSS

```css
.reveal-card {
  position: relative;
  width: 240px;
  border: 1px solid #e2d8c2;
  border-radius: 10px;
  overflow: hidden; /* スライドしてくるオーバーレイを枠内に収める */
  background: #fff;
}

.media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, #d9c79a 30%, #97362f);
}

.caption {
  margin: 0;
  padding: 12px 16px;
  font-size: 15px;
}

.overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px 16px;
  background: rgb(26 23 18 / 0.88);
  color: #fdfaf3;
  font-size: 13px;
  line-height: 1.6;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.overlay p { margin: 0 0 8px; }

.overlay a { color: #d9a441; }

.reveal-card:hover .overlay,
.reveal-card:focus-within .overlay {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .overlay { transition: none; }
}
```

## 仕組みの解説

オーバーレイを absolute でカード下端に貼り付け、初期状態は transform: translateY(100%) で自分の高さぶん下（=カード外）に隠しておきます。カードの overflow: hidden ではみ出しを非表示にし、:hover と :focus-within で transform を解除するとスライドインします。:focus-within を併記することで、中のリンクにTabで到達したときも開き、マウスなしでも内容にアクセスできます。

## 実装のポイント

タッチデバイスにはホバーがありません。重要な情報や導線はオーバーレイの中だけに置かず、常時見える場所にも用意してください。

## AIに依頼するときの文例

ホバーで下からオーバーレイがスライドして詳細が現れる画像カードを作ってください。transform: translateY(100%)で隠し、:hoverと:focus-withinの両方で表示。prefers-reduced-motionではアニメーションを無効にしてください。

## 使っているプロパティ

- [position](https://www.css-dictionary.com/property/position.md)
- [transform](https://www.css-dictionary.com/property/transform.md)
- [transition](https://www.css-dictionary.com/property/transition.md)
- [overflow](https://www.css-dictionary.com/property/overflow.md)
- [pseudo-focus-within](https://www.css-dictionary.com/property/pseudo-focus-within.md)