M-004 Hover Lift Effect | Vibe UI Pattern Library

ライブデモ Live Demo

カードにホバーすると浮き上がり、影が拡大します。リフト高さと影の強度をカスタムプロパティで調整できます。

Cards lift up on hover with expanded shadows. Adjust lift height and shadow intensity via custom properties.

Card Title

Hover to see the lift effect

Card Title

Hover to see the lift effect

Card Title

Hover to see the lift effect

リフト高さ Lift Height 8px

影の強度 Shadow Intensity 0.3

AI向け説明 AI Description

`M-004` は `:hover` 擬似クラスで `transform: translateY()` と `box-shadow` を同時に変更します。カスタムプロパティでリフト高さと影の強度を制御し、`transition` で滑らかな動きを実現します。

`M-004` uses `:hover` to change both `transform: translateY()` and `box-shadow` simultaneously. Custom properties control lift height and shadow intensity, while `transition` ensures smooth motion.

調整可能パラメータ Adjustable Parameters

--lift-height — ホバー時の浮き上がり高さ vertical lift distance on hover
--shadow-intensity — 影の拡大と不透明度の倍率 shadow spread and opacity multiplier
--transition-speed — アニメーション速度 animation speed
scale on hover — リフトと同時にスケールを追加 add scale transform alongside lift

実装 Implementation

HTML + CSS

<div class="lift-card">
  <h4>Title</h4>
  <p>Content</p>
</div>

<style>
:root {
  --lift-height: 8px;
  --shadow-intensity: 0.3;
}

.lift-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lift-card:hover {
  transform: translateY(calc(var(--lift-height) * -1));
  box-shadow: 0 20px 40px rgba(0, 0, 0, calc(0.15 * var(--shadow-intensity)));
}
</style>

React (JSX + CSS)

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

export default function HoverLiftEffect({ title, content }) {
  return (
    <div className="lift-card">
      <h4>{title}</h4>
      <p>{content}</p>
    </div>
  );
}

/* react/M-004.css */
.lift-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lift-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

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

Please implement the following UI pattern.

- Pattern ID: M-004
- Pattern Name: Hover Lift Effect
- Reference URL: https://devsnips.dev/animations/M-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

キーボードフォーカス時にも同じエフェクトを適用するため、`:focus-visible` にも同じスタイルを追加してください。モバイルではタッチフィードバックとして軽いスケール変更を検討してください。

Add the same effect to `:focus-visible` for keyboard users. On mobile, consider a subtle scale change as touch feedback.