M-004 Animation simple

How to create a hover lift effect ホバーリフトエフェクトの作り方

Cards lift up on hover with expanded shadows. Adjust lift height and shadow intensity. ホバー時にカードが浮き上がり影が拡大するエフェクト。リフト高さと影の強度を調整できます。

hover lift shadow card

ライブデモ Live Demo

Card Title

Hover to see the lift effect

Card Title

Hover to see the lift effect

Card Title

Hover to see the lift effect

8px
0.3

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

何ができるかWhat it does

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

ホバー時にカードが浮き上がり影が拡大するエフェクト。リフト高さと影の強度を調整できます。

どこで使うかWhere to use

hero section, micro interaction, visual feedback, brand expression

カードUI、商品リスト、ポートフォリオグリッド、ダッシュボードウィジェット

特徴Key features

Lightweight hover lift using CSS transform: translateY and box-shadow transition. No JavaScript needed. Fully GPU-accelerated for smooth 60 fps animation. Works on any block element.

CSS transform:translateYとbox-shadowトランジションによる軽量ホバーリフト。JavaScript不要。GPUアクセラレーション対応で60fps滑らか。任意のブロック要素に適用可能。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
--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 Code 

// 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);
}
import "./M-004.css";

export default function HoverLiftEffect({ title = "Card Title", content = "Hover to see the lift effect" }) {
  return (
    <div className="lift-card">
      <h4>{title}</h4>
      <p>{content}</p>
    </div>
  );
}
/* Lift card styles are now in global.css */

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

仕組みHow it works

On :hover, the card transitions translateY to a negative value (e.g., -6px) while simultaneously deepening the box-shadow to simulate a lifted surface catching light. The transition timing uses ease-out to feel physically natural on the way up and ease-in on return.

:hoverでtranslateYを負の値（例：-6px）にトランジションしながら同時にbox-shadowを深くし、光を受けた浮き上がった面を演出。ease-outで上昇時、ease-inで復帰時に物理的に自然なフィールを実現。

カスタマイズ方法Customization

Increase translateY magnitude for a more dramatic lift. Adjust box-shadow blur and spread to simulate different light sources. Add will-change: transform on the element to pre-hint the browser for smoother performance.

translateYの値を大きくしてより大きな浮き上がりを演出。box-shadowのblurとspreadで光源の違いをシミュレート。要素にwill-change:transformを追加してブラウザへの事前ヒントを与えパフォーマンス向上。

注意点Caveats

Avoid using with elements that have overflow: hidden as the shadow may be clipped. Pair with focus-visible styles so keyboard users also see the lifted state when navigating by tab.

overflow:hiddenを持つ要素では影がクリップされる場合があります。キーボードユーザーがタブ移動時にも浮き上がり状態を確認できるようfocus-visibleスタイルと組み合わせてください。

よくある質問 Frequently Asked Questions

How to customize the hover lift effect? Hover Lift Effectをカスタマイズするには？

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 hover lift effect in React? ReactでHover Lift Effectを使うには？

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 hover lift effect? Hover Lift Effectのパフォーマンスへの影響は？

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.