Floorplan Room Spotlight

Live Demo

マウスでホバーするかTabキーで対象にフォーカスしてください。

Source Code

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

<div class="tbx-1272"><div class="listing"><div class="heading"><b>APT. 07</b><span>2LDK / 67.8m²</span></div><div class="plan"><button class="room living" type="button"><span>Living</span><small>20.4 m²</small></button><button class="room bedroom" type="button"><span>Bedroom</span><small>12.6 m²</small></button><button class="room study" type="button"><span>Study</span><small>7.8 m²</small></button><div class="hall">ENTRANCE →</div></div></div></div>

.tbx-1272{width:100%;min-height:218px;box-sizing:border-box;display:grid;place-items:center;padding:16px;background:#f0efe9;font-family:system-ui,sans-serif;color:#39433d}.tbx-1272 *{box-sizing:border-box}
.tbx-1272 .listing{background:#fff;width:min(320px,100%);padding:13px;border:1px solid #d0cec3;box-shadow:0 8px 20px #3e4e3e18}.tbx-1272 .heading{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e3e2da;padding-bottom:9px;margin-bottom:9px;gap:8px;font-size:11px}.tbx-1272 .heading b{letter-spacing:.16em}.tbx-1272 .heading span{font-size:9px;color:#89938c}
.tbx-1272 .plan{display:grid;grid-template-columns:1.1fr .85fr;grid-template-rows:80px 60px 20px;gap:3px;background:#8b938b;border:3px solid #748478}.tbx-1272 .room{display:flex;align-items:flex-start;justify-content:center;flex-direction:column;text-align:left;gap:2px;background:#edf2eb;border:0;cursor:pointer;color:#47614e;padding:11px;font:600 11px system-ui;min-width:0;position:relative;transition:background .35s,color .35s}
.tbx-1272 .room small{font-size:9px;color:inherit;opacity:0;transform:translateY(5px);transition:transform .35s,opacity .35s}.tbx-1272 .living{grid-row:span 2}.tbx-1272 .study{background:#dce6d9}.tbx-1272 .hall{grid-column:span 2;display:grid;place-items:center;background:#d8ded3;font-size:8px;letter-spacing:.17em;color:#647366}
.tbx-1272 .room:is(:hover,:focus-visible){background:#55745d;color:white}.tbx-1272 .room:is(:hover,:focus-visible) small{opacity:1;transform:none}.tbx-1272 :focus-visible{outline:3px solid #d68d55;outline-offset:-4px}
@media(prefers-reduced-motion:reduce){.tbx-1272 *{transition:none!important}}

How to Use

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

Use Case

Real Estate, Property

Technical Notes

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

Mobile：タッチ端末ではホバーができないため、フォーカス・タッチ操作を確認してください。

Browser：現行版のChrome・Safari・Firefox・Edgeを推奨。:has()を利用する素材は古いブラウザでは挙動が異なる場合があります。

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