Live Demo
ホバー操作、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div tabindex="0" class="tbx-1291" role="group" aria-label="Sustainable design — 素材を長く使う設計"><span class="tbx-1291__initial">S</span><div class="tbx-1291__copy"><span>EDITORIAL / 01</span><strong>ustainable<br>design</strong><small>Useful, lasting, considered.</small></div><span class="tbx-1291__hint">DESIGN FOR LONGEVITY ↗</span></div>CSS
*{box-sizing:border-box}
.tbx-1291{width:295px;max-width:100%;min-height:152px;position:relative;display:flex;align-items:center;gap:1px;padding:17px 12px 22px;border-bottom:1px solid #8d9d95;background:#f7f6ef;color:#2a3b33;overflow:hidden;font-family:Georgia,serif;cursor:default}.tbx-1291__initial{font-size:95px;font-weight:bold;line-height:.85;color:#3d715f;transition:transform .45s,color .45s;transform-origin:bottom left}.tbx-1291__copy{display:flex;flex-direction:column;gap:5px}.tbx-1291__copy span{font:700 9px system-ui,sans-serif;letter-spacing:.19em;color:#8c968a}.tbx-1291__copy strong{font-size:27px;line-height:.93;font-weight:600}.tbx-1291__copy small{font:italic 11px Georgia,serif;color:#7c857d}.tbx-1291__hint{position:absolute;bottom:5px;right:12px;font:700 9px system-ui,sans-serif;letter-spacing:.08em;color:#4d7461;transform:translateY(16px);opacity:0;transition:transform .36s,opacity .36s}.tbx-1291:hover .tbx-1291__initial,.tbx-1291:focus-visible .tbx-1291__initial{transform:scale(1.16) rotate(-7deg);color:#c5864b}.tbx-1291:hover .tbx-1291__hint,.tbx-1291:focus-visible .tbx-1291__hint{transform:translateY(0);opacity:1}.tbx-1291:focus-visible{outline:3px solid #60987e;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.tbx-1291 *,.tbx-1291::before,.tbx-1291::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Editorial / Article
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバー動作が異なるため、フォーカス操作・実案件のタップ操作を確認してください。
Browser：Chrome / Firefox / Edge / Safariの標準CSS機能を使用します。
Reduced Motion：prefers-reduced-motion: reduceでCSSアニメーション・トランジションを停止します。