# ホバーで画像ズームのCSSアニメーション実装

> 枠のサイズは変えずに、中の画像だけがゆっくり拡大するホバーエフェクト。ギャラリーや商品カードの定番です。

- カテゴリ: ホバー
- URL: https://www.css-dictionary.com/animations/hover-image-zoom/

## HTML

```html
<figure class="zoom-frame">
  <div class="zoom-photo" role="img" aria-label="サンプル写真"></div>
  <figcaption>ホバーで中身だけ拡大</figcaption>
</figure>
```

## CSS

```css
.zoom-frame {
  width: 240px;
  margin: 0;
  border: 1px solid #e2d8c2;
  border-radius: 10px;
  overflow: hidden; /* 拡大した中身を枠でトリミングする */
  background: #fff;
}

.zoom-photo {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 70% 30%, #d9a441 0 18%, transparent 19%),
    linear-gradient(160deg, #a8b8a0, #4a7c59);
  transition: transform 0.4s ease;
}

.zoom-frame:hover .zoom-photo,
.zoom-frame:focus-within .zoom-photo {
  transform: scale(1.08);
}

figcaption {
  padding: 10px 14px;
  font-size: 13px;
  color: #5c5445;
}

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

## 仕組みの解説

仕組みは「外枠の overflow: hidden ＋ 中身の transform: scale()」の2つだけです。拡大するのは中身だけで枠のサイズは変わらないため、周囲のレイアウトに影響しません。scaleは要素の中心を基点に拡大するので、はみ出した分は枠が均等にトリミングします。倍率は1.05〜1.1程度が上品です。

## 実装のポイント

実際の画像では img に width: 100% と object-fit: cover を指定してから同じtransformを掛けます。ホバー時にぼかしや暗幕を重ねるとテキストオーバーレイとも相性が良いです。

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

- [overflow](https://www.css-dictionary.com/property/overflow.md)
- [transform](https://www.css-dictionary.com/property/transform.md)
- [transition](https://www.css-dictionary.com/property/transition.md)
- [aspect-ratio](https://www.css-dictionary.com/property/aspect-ratio.md)