V-004 Image Zoom on Hover | Vibe UI Pattern Library

ライブデモ Live Demo

カードにホバー（またはクリック）すると画像がゆっくりズームします。ズーム倍率と速度を調整できます。

Hover or click a card to see the image zoom in smoothly. Adjust zoom scale and duration.

ズーム倍率 Zoom Scale 1.08

アニメーション速度 Animation Speed 0.5s

AI向け説明 AI Description

`V-004` は画像を包む要素に `overflow: hidden` をかけ、画像自体に `transform: scale(1)` から `scale(var(--zoom-scale))` への `transition` を設定します。ホバー時にスケールが大きくなることで、はみ出た部分がクリップされズームして見えます。Codrops などの画像リビール系パターンと同系統です。

`V-004` wraps the image in a container with `overflow: hidden` and applies a `transition` on the image from `transform: scale(1)` to `scale(var(--zoom-scale))`. On hover the scale increases and the clipped area creates a zoom effect. Same family as Codrops-style image reveal patterns.

調整可能パラメータ Adjustable Parameters

--zoom-scale — ホバー時の拡大率（例: 1.08 = 108%）hover scale value (e.g. 1.08 = 108%)
--zoom-duration — ズームのアニメーション時間zoom transition duration

実装 Implementation

HTML + CSS

<div class="zoom-card">
  <div class="zoom-card__img-wrap">
    <img class="zoom-card__img" src="image.jpg" alt="" />
  </div>
</div>

<style>
:root {
  --zoom-scale: 1.08;
  --zoom-duration: 0.5s;
}

.zoom-card__img-wrap {
  overflow: hidden;
}

.zoom-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--zoom-duration) ease;
}

.zoom-card:hover .zoom-card__img {
  transform: scale(var(--zoom-scale));
}
</style>

React (JSX + CSS)

// react/V-004.jsx
import "./V-004.css";

export default function ImageZoomCard({ src, alt }) {
  return (
    <div className="zoom-card">
      <div className="zoom-card__img-wrap">
        <img className="zoom-card__img" src={src} alt={alt || ""} />
      </div>
    </div>
  );
}

/* react/V-004.css - same as above */

AIへの指示テンプレート AI Prompt Template

以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.

以下のUIパターンを実装してください。

- パターンID: V-004
- パターン名: 画像ホバーズーム
- 参照URL: https://devsnips.dev/animations/V-004.html
- フレームワーク: [React / Vue / Vanilla JS / その他]
- 要件:
  - デザインは参照URLのデモに準拠
  - レスポンシブ対応（モバイル/デスクトップ）
  - アクセシビリティ考慮（キーボード操作、スクリーンリーダー）
  - [ここに追加の要件を記述]

Please implement the following UI pattern.

- Pattern ID: V-004
- Pattern Name: Image Zoom on Hover
- Reference URL: https://devsnips.dev/animations/V-004.html
- Framework: [React / Vue / Vanilla JS / Other]
- Requirements:
  - Follow the design from the reference URL demo
  - Responsive (mobile / desktop)
  - Accessibility (keyboard navigation, screen reader)
  - [Add your requirements here]

注意とバリエーション Notes & Variations

ズームと同時に `translate` を加えると Ken Burns 風のパン効果になります。参考: Codrops (tympanus.net/codrops/)。

Adding a slight `translate` with the zoom creates a Ken Burns-style pan. Reference: Codrops.