V-003 Image Gallery | Vibe UI Pattern Library

ライブデモ Live Demo

グリッドレイアウトの画像ギャラリー。ホバー時に画像が拡大し、オーバーレイが表示されます。ギャップと拡大率を調整できます。

Grid layout image gallery. Images scale up on hover with overlay reveal. Adjust gap and scale ratio.

Image Title

Image Title

Image Title

Image Title

ホバー拡大率 Hover Scale 1.05x

AI向け説明 AI Description

`V-003` は CSS Grid で画像を配置し、`:hover` で `transform: scale()` とオーバーレイの `opacity` を同時に変更します。`aspect-ratio` で画像の縦横比を統一します。

`V-003` uses CSS Grid for layout and `:hover` to change both `transform: scale()` and overlay `opacity` simultaneously. `aspect-ratio` keeps images uniform.

調整可能パラメータ Adjustable Parameters

--gallery-gap — 画像間のギャップ gap between images
--hover-scale — ホバー時の拡大率 scale ratio on hover
--overlay-opacity — オーバーレイの不透明度 overlay opacity
grid columns — レスポンシブグリッドの列数 responsive grid column count

実装 Implementation

HTML + CSS

<div class="gallery-grid">
  <div class="gallery-item">
    <img src="image.jpg" alt="Gallery" />
    <div class="gallery-overlay">
      <h4>Title</h4>
    </div>
  </div>
</div>

<style>
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.gallery-item img {
  transition: transform 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}
</style>

React (JSX + CSS)

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

export default function ImageGallery({ images }) {
  return (
    <div className="gallery-grid">
      {images.map((image) => (
        <div key={image.id} className="gallery-item">
          <img src={image.url} alt={image.title} />
          <div className="gallery-overlay">
            <h4>{image.title}</h4>
          </div>
        </div>
      ))}
    </div>
  );
}

/* react/V-003.css */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

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

Please implement the following UI pattern.

- Pattern ID: V-003
- Pattern Name: Image Gallery
- Reference URL: https://devsnips.dev/animations/V-003.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

モーダル表示やライトボックス機能を追加する場合は、クリックイベントで画像を拡大表示してください。`loading="lazy"` で画像の遅延読み込みを実装してください。

Add modal or lightbox functionality by handling click events to show enlarged images. Implement lazy loading with `loading="lazy"`.