Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1224"><a href="#demo-1224" class="tbx-1224-sleeve"><span class="tbx-1224-sample"><i></i><strong>SANDSTONE</strong></span><span class="tbx-1224-pocket"><b>MATERIAL NO. 04</b><small>VIEW FINISH ↗</small></span></a></div>CSS
.tbx-1224{box-sizing:border-box;max-width:100%;overflow:visible}
.tbx-1224{display:grid;place-items:center;width:100%;min-height:200px;padding:15px;background:#eee4d7;font-family:Arial,sans-serif}.tbx-1224 *{box-sizing:border-box}.tbx-1224-sleeve{display:block;position:relative;width:min(100%,260px);height:166px;text-decoration:none;outline-offset:4px}.tbx-1224-sample{position:absolute;inset:4px 33px 26px 33px;display:flex;flex-direction:column;gap:6px;align-items:center;padding:14px;background:repeating-linear-gradient(35deg,#b99b78 0 3px,#bfa78a 3px 6px,#b6a081 6px 9px);color:#fff;border-radius:5px;box-shadow:0 5px 13px #634b382f;transition:transform .5s,filter .5s}.tbx-1224-sample i{width:38px;height:38px;border:2px solid #ffffffba;border-radius:50%;box-shadow:inset 0 0 0 7px #9f886e6b}.tbx-1224-sample strong{font-size:10px;letter-spacing:.12em;text-shadow:0 1px 3px #32261b}.tbx-1224-pocket{position:absolute;bottom:0;left:5px;right:5px;height:77px;display:flex;flex-direction:column;justify-content:flex-end;gap:9px;padding:11px 17px;background:#f9f4e9;box-shadow:0 -3px 7px #6a483315,inset 0 2px #ffffff;border:1px solid #c9ac8b;color:#655037;border-radius:5px}.tbx-1224-pocket b{font-size:11px;letter-spacing:.16em}.tbx-1224-pocket small{font-size:9px;letter-spacing:.1em;color:#8b674e}.tbx-1224-sleeve:is(:hover,:focus-visible) .tbx-1224-sample{transform:translateY(-23px) rotate(-4deg);filter:saturate(1.2)}.tbx-1224-sleeve:focus-visible{outline:3px solid #8d653f}
@media(prefers-reduced-motion:reduce){.tbx-1224 *, .tbx-1224 *::before,.tbx-1224 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Product, Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報をホバー時だけに限定しないでください。
Browser：最新のChrome・Safari・Firefox・Edgeでご確認ください。
Reduced Motion：prefers-reduced-motion: reduceに対応。