ホバーまたはキーボードフォーカスで、下からオーバーレイがスライドして詳細が現れるカード。focus-within対応でキーボードでも使えます。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
オーバーレイを absolute でカード下端に貼り付け、初期状態は transform: translateY(100%) で自分の高さぶん下（=カード外）に隠しておきます。カードの overflow: hidden ではみ出しを非表示にし、:hover と :focus-within で transform を解除するとスライドインします。:focus-within を併記することで、中のリンクにTabで到達したときも開き、マウスなしでも内容にアクセスできます。
タッチデバイスにはホバーがありません。重要な情報や導線はオーバーレイの中だけに置かず、常時見える場所にも用意してください。
ホバーで下からオーバーレイがスライドして詳細が現れる画像カードを作ってください。transform: translateY(100%)で隠し、:hoverと:focus-withinの両方で表示。prefers-reduced-motionではアニメーションを無効にしてください。