Photo Contact Strip Lift

Live Demo

マウスを乗せるかTabキーでフォーカスして動作を確認してください。

Source Code

必要なコードをコピーして実装に利用できます。

<div class="tbx-1221"><div class="tbx-1221-strip"><a href="#demo-1221-1" class="tbx-1221-shot a"><span class="tbx-1221-sun"></span><span class="tbx-1221-label">01 — DUSK</span></a><a href="#demo-1221-2" class="tbx-1221-shot b"><span class="tbx-1221-sun"></span><span class="tbx-1221-label">02 — RIDGE</span></a><a href="#demo-1221-3" class="tbx-1221-shot c"><span class="tbx-1221-sun"></span><span class="tbx-1221-label">03 — LAKE</span></a></div></div>

.tbx-1221{box-sizing:border-box;max-width:100%;overflow:visible}
.tbx-1221{display:grid;place-items:center;width:100%;min-height:200px;padding:25px 15px;background:#d8ddd8;font-family:Arial,sans-serif}.tbx-1221 *{box-sizing:border-box}.tbx-1221-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:min(100%,330px);align-items:center}.tbx-1221-shot{position:relative;height:136px;overflow:hidden;border:4px solid #fff;box-shadow:0 5px 12px #192c2720;text-decoration:none;transition:transform .42s,box-shadow .42s;isolation:isolate;outline-offset:2px}.tbx-1221-shot.a{background:linear-gradient(160deg,#eebc86 0 45%,#7b7e83 46% 63%,#364d4d 64%)}.tbx-1221-shot.b{background:linear-gradient(154deg,#a0c6c6 0 47%,#36474c 48% 66%,#142e34 67%)}.tbx-1221-shot.c{background:linear-gradient(165deg,#cbb5a1 0 43%,#5d8c97 44% 65%,#1f5163 66%)}.tbx-1221-sun{position:absolute;right:15px;top:17px;width:22px;height:22px;border-radius:50%;background:#ffedb5}.tbx-1221-label{position:absolute;left:0;right:0;bottom:0;padding:8px 4px;text-align:center;font-size:9px;letter-spacing:.04em;font-weight:800;background:#fffef1;color:#1e3030;transform:translateY(100%);transition:transform .42s}.tbx-1221-shot:is(:hover,:focus-visible){transform:translateY(-13px) rotate(-1deg);box-shadow:0 16px 21px #192c2744;z-index:2}.tbx-1221-shot:is(:hover,:focus-visible) .tbx-1221-label{transform:translateY(0)}.tbx-1221-shot:focus-visible{outline:3px solid #216a7a}
@media(prefers-reduced-motion:reduce){.tbx-1221 *, .tbx-1221 *::before,.tbx-1221 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}

How to Use

HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。

Use Case

Portfolio, Gallery

Technical Notes

ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。

Mobile：タッチ端末では重要な情報をホバー時だけに限定しないでください。

Browser：最新のChrome・Safari・Firefox・Edgeでご確認ください。

Reduced Motion：prefers-reduced-motion: reduceに対応。