ホバーでカードがふわっと浮き上がる定番エフェクト。translateと二段構えの影で自然な浮遊感を作ります。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
位置の移動にはmarginやtopではなく個別変形プロパティのtranslateを使います（レイアウトを再計算させず、GPUで合成されるため滑らか）。影は「小さく濃い影+大きく薄い影」の二段重ねにすると、単発の影より自然な奥行きが出ます。transitionの対象をtranslateとbox-shadowに限定しているのは、allにして意図しないプロパティまで動かさないためです。
タッチデバイスではホバーが貼り付くため、実務では@media (hover: hover)でガードすると安全です。
このカードコンポーネントに、ホバーでふわっと浮き上がるエフェクトを付けて。translateとbox-shadowのtransitionで、影は二段重ねで自然に見せて。
ホバー時のリフト効果を@media (hover: hover)でガードして、タッチデバイスで貼り付かないようにして。
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。