V-001 Media medium

How to create a video hover reveal ビデオホバーリビールの作り方

A video thumbnail that reveals play controls and metadata on hover. サムネイルにホバーするとプレイボタンとメタ情報が浮き上がる動画プレビューカード。

video hover thumbnail

ライブデモ Live Demo

Deep Dive Motion

04:12

ホバーズーム Hover zoom 1.05x

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

何ができるかWhat it does

A video thumbnail that reveals play controls and metadata on hover.

サムネイルにホバーするとプレイボタンとメタ情報が浮き上がる動画プレビューカード。

どこで使うかWhere to use

content gallery, video player, media library, portfolio showcase

動画コンテンツプレビュー、ポートフォリオカード、プロダクトデモ、コース一覧

特徴Key features

Video autoplays (muted) on card hover and pauses on mouse leave. Thumbnail image shown by default. CSS transition for smooth overlay fade. No controls shown for a clean card aesthetic. Works with mp4 and WebM sources.

カードホバー時に動画がミュートで自動再生し、マウスを離すと一時停止。デフォルトではサムネイル画像を表示。スムーズなオーバーレイフェードのCSSトランジション。クリーンなカード見た目のためにコントロールを非表示。mp4とWebMソースに対応。

調整可能パラメータ Adjustable Parameters

Parameter	Default	Description
`hover zoom`	—	adjust image scale on hover
`overlay darkness`	—	control overlay opacity
`metadata layout`	—	arrangement of title/duration
`play button style`	—	circular, square, etc.

実装コード Implementation Code

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

export default function VideoHoverReveal({ src, title, duration }) {
  return (
    <div className="video-card">
      <img src={src} alt={title} />
      <div className="video-meta">
        <div>
          <h3>{title}</h3>
          <small>{duration}</small>
        </div>
        <div className="video-play" />
      </div>
    </div>
  );
}

/* react/V-001.css */
.video-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

.video-card img {
  width: 100%;
  transition: transform 0.4s ease;
}

.video-card:hover img {
  transform: scale(var(--hover-zoom, 1.05));
}

.video-meta {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.video-card:hover .video-meta {
  opacity: 1;
  transform: translateY(0);
}

import "./V-001.css";

export default function VideoHoverReveal({
  title = "Deep Dive Motion",
  duration = "04:12",
  thumbnail = "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1000&q=60",
}) {
  return (
    <article className="video-card">
      <img src={thumbnail} alt={title} />
      <div className="video-meta">
        <div>
          <h3>{title}</h3>
          <small>{duration}</small>
        </div>
        <button className="video-play" aria-label="Play video" />
      </div>
    </article>
  );
}

.video-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
}

.video-card img {
  width: 100%;
  display: block;
  transition: transform 0.35s ease;
}

.video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.65));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-meta {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  color: #fff;
}

.video-play {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.35);
  position: relative;
}

.video-play::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.video-card:hover img {
  transform: scale(1.05);
}

.video-card:hover::after {
  opacity: 1;
}

.video-card:hover .video-meta {
  opacity: 1;
  transform: translateY(0);
}

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

仕組みHow it works

A <video> element is positioned absolutely over a <img> thumbnail inside the card. The video has autoplay, muted, loop, and playsinline attributes. On mouseenter, JavaScript calls video.play() and a CSS class fades the thumbnail out/video in. On mouseleave, video.pause() is called and the thumbnail fades back.

<video>要素がカード内の<img>サムネイルの上に絶対配置。動画はautoplay・muted・loop・playsinline属性を持ちます。mouseenter時にJavaScriptがvideo.play()を呼び出してCSSクラスがサムネイルをフェードアウト/動画をフェードイン。mouseleave時にvideo.pause()を呼び出してサムネイルがフェードバック。

カスタマイズ方法Customization

Add a play icon overlay on the thumbnail that fades out when video starts. Lazy-load the video src using IntersectionObserver to avoid downloading unused video. Provide a touch fallback that plays the video on tap instead of hover.

動画開始時にフェードアウトするサムネイル上の再生アイコンオーバーレイを追加。IntersectionObserverを使用してvideo srcを遅延ロードし未使用動画のダウンロードを避ける。ホバーの代わりにタップで動画を再生するタッチフォールバックを提供。

注意点Caveats

Autoplay policies differ between browsers — always include muted to enable autoplay. Provide the static thumbnail as a meaningful alt text image fallback. Users should be able to access video content without hover — add a click-to-fullscreen option.

ブラウザによってオートプレイポリシーが異なります — オートプレイを有効にするために常にmutedを含めてください。静的サムネイルを意味のあるalt textの画像フォールバックとして提供してください。ユーザーはホバーなしで動画コンテンツにアクセスできる必要があります — クリックでフルスクリーンオプションを追加してください。

よくある質問 Frequently Asked Questions

How to customize the video hover reveal? Video Hover Revealをカスタマイズするには？

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 video hover reveal in React? ReactでVideo Hover Revealを使うには？

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 video hover reveal? Video Hover Revealのパフォーマンスへの影響は？

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.

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

- パターンID: V-001
- パターン名: ビデオホバーリビール
- 参照URL: https://devsnips.dev/snippets/video-hover-reveal/
- フレームワーク: [React / Vue / Vanilla JS / その他]
- 要件:
  - デザインは参照URLのデモに準拠
  - レスポンシブ対応（モバイル/デスクトップ）
  - アクセシビリティ考慮
  - [ここに追加の要件を記述]

Please implement the following UI pattern.

- Pattern ID: V-001
- Pattern Name: Video Hover Reveal
- Reference URL: https://devsnips.dev/snippets/video-hover-reveal/
- 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]