Live Demo
マウスを乗せるかTabキーでフォーカスして、動きの変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1211"><a href="#tbx-1211-project" class="tbx-1211-card"><span class="tbx-1211-top">PROJECT 07 <b>↗</b></span><span class="tbx-1211-building"><i class="tbx-1211-roof"></i><i class="tbx-1211-floor f3"></i><i class="tbx-1211-floor f2"></i><i class="tbx-1211-floor f1"></i><span class="tbx-1211-call l3">03 / STUDIO</span><span class="tbx-1211-call l2">02 / LOUNGE</span><span class="tbx-1211-call l1">01 / GALLERY</span></span><span class="tbx-1211-foot">ATELIER / MIXED USE</span></a></div>CSS
.tbx-1211{box-sizing:border-box}
.tbx-1211{display:grid;place-items:center;width:100%;min-height:182px;padding:10px;background:#edf1f5;font-family:Arial,sans-serif}.tbx-1211 *{box-sizing:border-box}.tbx-1211-card{display:grid;grid-template-rows:25px 1fr 20px;width:min(100%,310px);height:165px;padding:11px 14px;background:#183044;border-radius:5px;color:#cce4ee;text-decoration:none;overflow:hidden;outline-offset:3px}.tbx-1211-top,.tbx-1211-foot{display:flex;justify-content:space-between;letter-spacing:.16em;font-weight:700;font-size:9px}.tbx-1211-top b{font-size:14px}.tbx-1211-building{position:relative;margin:0 auto;width:180px;height:97px;transform:perspective(400px) rotateY(-8deg)}.tbx-1211-roof{position:absolute;top:4px;left:20px;width:125px;border-top:3px solid #a2d3dd}.tbx-1211-floor{position:absolute;left:24px;width:120px;height:24px;border:1px solid #aac8d0;background:repeating-linear-gradient(90deg,transparent 0 22px,#aac8d065 22px 23px);transition:background .3s}.tbx-1211-floor.f3{top:6px}.tbx-1211-floor.f2{top:34px}.tbx-1211-floor.f1{top:62px}.tbx-1211-call{position:absolute;left:146px;white-space:nowrap;font-size:8px;letter-spacing:.08em;opacity:0;transform:translateX(-10px);transition:opacity .3s,transform .3s}.tbx-1211-call::before{content:'';position:absolute;left:-19px;top:4px;width:14px;border-top:1px solid #ffc979}.tbx-1211-call.l3{top:9px}.tbx-1211-call.l2{top:37px;transition-delay:.07s}.tbx-1211-call.l1{top:65px;transition-delay:.14s}.tbx-1211-card:is(:hover,:focus-visible) .tbx-1211-call{opacity:1;transform:translateX(0)}.tbx-1211-card:is(:hover,:focus-visible) .tbx-1211-floor{background:#7eaec14f}.tbx-1211-card:focus-visible{outline:3px solid #ffc979}
@media (prefers-reduced-motion:reduce){.tbx-1211 *, .tbx-1211 *::before, .tbx-1211 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Portfolio / Architecture
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報をホバーでしか見られない構造にしないでください。
Browser：CSSの:has()を使用する素材は最近のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduceに対応。