V-004 Media simple

How to create a image zoom on hover 画像ホバーズームの作り方

Image zooms in smoothly on hover. Codrops-style media hover pattern. ホバー時に画像がゆっくりズームするエフェクト。Codrops 系のメディアホバーパターン。

image hover zoom Codrops

ライブデモ Live Demo

Sample
Sample
Sample
1.08
0.5s

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Image zooms in smoothly on hover. Codrops-style media hover pattern.

ホバー時に画像がゆっくりズームするエフェクト。Codrops 系のメディアホバーパターン。

どこで使うかWhere to use

content gallery, video player, media library, portfolio showcase

商品画像、ポートフォリオグリッド、ニュース記事サムネイル、チームメンバー写真

特徴Key features

Smooth image zoom on hover using CSS transform: scale() with overflow: hidden on the container. Optional Ken Burns effect (slow pan + zoom). No JavaScript required for basic zoom. Overlay caption appears on hover.

コンテナのoverflow:hiddenとCSS transform:scale()を使用したホバー時のスムーズな画像ズーム。オプションのケン・バーンズエフェクト（ゆっくりしたパン+ズーム）。基本的なズームにJavaScript不要。ホバー時にオーバーレイキャプションを表示。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--zoom-scale—hover scale value (e.g. 1.08 = 108%)
--zoom-duration—zoom transition duration

実装コード Implementation Code 

// 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 */
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>
  );
}
:root {
  --v4-zoom-scale: 1.08;
  --v4-zoom-duration: 0.5s;
}

.zoom-card {
  width: 200px;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.zoom-card__img-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

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

.zoom-card:hover .zoom-card__img {
  transform: scale(var(--v4-zoom-scale));
}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

The image sits inside a container with overflow: hidden. On :hover of the container, the image transitions transform: scale(1.1) (or scale(1.15) for a more dramatic zoom). The container clips the scaled image, keeping the layout stable. An optional overlay div fades in over the image for captions or CTAs.

画像はoverflow:hiddenのコンテナ内に配置。コンテナの:hoverで画像がtransform:scale(1.1)（またはより劇的なズームのためscale(1.15)）にトランジション。コンテナがスケールされた画像をクリップしてレイアウトを安定に保ちます。オプションのオーバーレイdivがキャプションやCTAのために画像上にフェードイン。

カスタマイズ方法Customization

Combine scale with translateY for a rise-and-zoom effect. Add a grayscale filter that transitions to full color on hover. For Ken Burns, use a longer duration (5-8s) and combine scale with background-position animation.

scaleとtranslateYを組み合わせて上昇+ズームエフェクトに。ホバー時にフルカラーにトランジションするグレースケールフィルターを追加。ケン・バーンズには長い時間（5〜8秒）を使用してscaleとbackground-positionアニメーションを組み合わせ。

注意点Caveats

Ensure the zoom does not cause the image to pixelate at the maximum scale — use a larger source image if needed. The zoom is purely decorative; do not use it to reveal important information visible only on zoom.

最大スケール時に画像がピクセル化しないように確認してください — 必要に応じてより大きいソース画像を使用してください。ズームは純粋に装飾的なものです。ズーム時にのみ見える重要な情報を明らかにするために使用しないでください。

よくある質問 Frequently Asked Questions

How to customize the image zoom on hover? Image Zoom on Hoverをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the image zoom on hover in React? ReactでImage Zoom on Hoverを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of image zoom on hover? Image Zoom on Hoverのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

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

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.