Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1091" href="#case" aria-label="店舗リニューアルの事例を見る"><span class="tbx-1091__shadow" aria-hidden="true"></span><span class="tbx-1091__card"><span class="tbx-1091__figure" aria-hidden="true"><i></i><b></b></span><span class="tbx-1091__body"><small>CASE STUDY / 024</small><strong>Store Renewal</strong><span>店舗リニューアルの事例 <em aria-hidden="true">↗</em></span></span></span></a>
CSS
.tbx-1091{position:relative;display:block;width:min(260px,100%);height:214px;color:#1d3e4b;text-decoration:none;font-family:system-ui,sans-serif;isolation:isolate}
.tbx-1091__shadow{position:absolute;inset:12px 6px 3px 14px;background:#87b6ae;transform:translate(0,0);transition:transform .42s cubic-bezier(.2,.8,.2,1)}
.tbx-1091__card{position:absolute;inset:0 11px 13px 0;background:#fff;box-shadow:0 6px 15px #27455224;border:1px solid #c8d6d4;display:flex;flex-direction:column;overflow:hidden;transition:transform .4s}
.tbx-1091__figure{display:block;height:103px;background:linear-gradient(150deg,#dce3de 0 52%,#98b2a5 53%);position:relative;overflow:hidden}.tbx-1091__figure i{position:absolute;width:143px;height:91px;top:23px;left:46px;background:#f3e8d6;transform:skewY(-9deg);box-shadow:6px 7px 0 #415b5b55}.tbx-1091__figure b{position:absolute;width:52px;height:58px;top:46px;left:78px;border:10px solid #698e88;background:#bed1c7}
.tbx-1091__body{padding:13px 14px;display:flex;flex-direction:column;gap:5px}.tbx-1091__body small{font-size:8px;color:#648b87;letter-spacing:.1em;font-weight:750}.tbx-1091__body strong{font-size:18px;line-height:1.15}.tbx-1091__body>span{font-size:10px;color:#647e86;display:flex;justify-content:space-between}.tbx-1091__body em{font-size:16px;font-style:normal;transition:transform .32s}
.tbx-1091:is(:hover,:focus-visible) .tbx-1091__card{transform:translate(-7px,-8px)}.tbx-1091:is(:hover,:focus-visible) .tbx-1091__shadow{transform:translate(8px,7px)}.tbx-1091:is(:hover,:focus-visible) em{transform:translate(3px,-3px)}
.tbx-1091:focus-visible{outline:3px solid #e2ad6d;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1091 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Portfolio / Case Study
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では本来のリンク・操作を優先し、必要な情報は通常状態でも理解できるようにしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。