Live Demo
対象要素をマウスでホバー、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1283" tabindex="0" role="group" aria-label="セミナー開催予定"><div class="tbx-1283__date"><b>24</b><span>OCT / SAT</span></div><div class="tbx-1283__info"><small>DESIGN SEMINAR</small><strong>Design systems</strong><span class="tbx-1283__more">13:30 – 15:00<br/>Online / Free</span></div></div>
CSS
.tbx-1283{box-sizing:border-box;display:flex;position:relative;width:305px;max-width:100%;height:150px;border:1px solid #ccd7e6;border-radius:12px;background:#fff;color:#254162;overflow:hidden;box-shadow:0 9px 25px #213d5c12;cursor:default;font-family:system-ui,sans-serif}
.tbx-1283__date{display:flex;flex:none;width:85px;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:#31587c;color:white;transition:width .45s}
.tbx-1283__date b{font-size:41px;line-height:1}.tbx-1283__date span{font-size:9px;letter-spacing:.07em}
.tbx-1283__info{padding:27px 14px;overflow:hidden;min-width:0;display:flex;flex-direction:column;gap:7px;justify-content:center}
.tbx-1283__info small{color:#7b8aa6;font-size:9px;letter-spacing:.15em}.tbx-1283__info strong{font-size:15px;line-height:1.2;white-space:nowrap}
.tbx-1283__more{font-size:11px;line-height:1.45;max-height:0;opacity:0;transform:translateY(8px);transition:max-height .4s,opacity .3s,transform .4s}
.tbx-1283:hover .tbx-1283__date,.tbx-1283:focus-visible .tbx-1283__date{width:68px}
.tbx-1283:hover .tbx-1283__more,.tbx-1283:focus-visible .tbx-1283__more{max-height:45px;opacity:1;transform:translateY(0)}
.tbx-1283:focus-visible{outline:3px solid #74afdd;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.tbx-1283__date,.tbx-1283__more{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Events / Schedule
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバーと同じ結果にならないため、タップ・フォーカス時の動作も確認してください。
Browser：現行Chrome / Firefox / Edge / SafariのCSS機能を利用します。
Reduced Motion：prefers-reduced-motion: reduce でアニメーションを停止します。