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