V-001 Video Hover Reveal | Vibe UI Pattern Library

ライブデモ Live Demo

サムネイルの上にグラデーションオーバーレイとメタデータを重ねます。ホバー時にオーバーレイをフェードインして再生ボタンを浮き上がらせます。

Layer gradient overlays and metadata on top of the thumbnail. On hover, fade in the overlay and lift the play button.

Deep Dive Motion

04:12

ホバーズーム Hover zoom 1.05x

AI向け説明 AI Description

`V-001` はCSS `:hover` でサムネイル上にグラデーションオーバーレイをフェードイン、画像を `--hover-zoom` でズーム、メタデータを `translateY` でスライドアップさせます。`::after` 疑似要素が暗転オーバーレイを担当します。

`V-001` uses CSS `:hover` to fade in a gradient overlay, zoom the image via `--hover-zoom`, and slide up metadata with `translateY`. The `::after` pseudo-element handles the darkening overlay.

調整可能パラメータ Adjustable Parameters

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

HTML + CSS

<div class="video-card">
  <img src="thumbnail.jpg" alt="Preview" />
  <div class="video-meta">
    <div>
      <h3>Title</h3>
      <small>04:12</small>
    </div>
    <div class="video-play"></div>
  </div>
</div>

<style>
:root {
  --hover-zoom: 1.05;
}

.video-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

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

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

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

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

.video-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  z-index: 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

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

React (JSX + CSS)

// 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);
}

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-001
- パターン名: ビデオホバーリビール
- 参照URL: https://devsnips.dev/animations/V-001.html
- フレームワーク: [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/animations/V-001.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

アクセシビリティのためにキーボードフォーカス時にも同じ表示を行い、`.video-meta` 内にメタデータ（タグ、チャンネル）を積み重ねます。

Mirror the same reveal on keyboard focus for accessibility, and stack extra metadata (tags, channel) inside `.video-meta`.