Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1232"><a class="edit" href="#tb1232"><span class="eyebrow">WHAT WE VALUE</span><span class="line"><span class="old">More complexity.</span><span class="new">More clarity.</span></span><span class="marker">EDITED THINKING <b aria-hidden="true">↗</b></span></a></div>CSS
.tbx-1232{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:212px;width:100%;max-width:100%;padding:19px;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;color:#18314a;}
.tbx-1232 * ,.tbx-1232 *::before,.tbx-1232 *::after{box-sizing:border-box}
.tbx-1232{background:#e9e7e2}.tbx-1232 .edit{color:#2d3440;width:min(100%,285px);text-decoration:none;border-bottom:2px solid #9a9b95;padding:12px 4px 14px;display:grid;gap:15px}.tbx-1232 .eyebrow{font:750 10px system-ui;letter-spacing:.2em;color:#6d746d}.tbx-1232 .line{display:block;height:37px;overflow:hidden;position:relative;font:700 27px Georgia,serif;white-space:nowrap}.tbx-1232 .old,.tbx-1232 .new{position:absolute;left:0;top:0;transition:transform .42s,opacity .3s}.tbx-1232 .old{text-decoration:line-through;text-decoration-color:#c46a45;text-decoration-thickness:2px;text-decoration-skip-ink:none}.tbx-1232 .new{opacity:0;transform:translateY(32px);color:#30594f}.tbx-1232 .marker{font:700 9px system-ui;letter-spacing:.15em;color:#737c72;display:flex;justify-content:space-between}.tbx-1232 .edit:is(:hover,:focus-visible) .old{opacity:0;transform:translateY(-35px)}.tbx-1232 .edit:is(:hover,:focus-visible) .new{opacity:1;transform:translateY(0)}.tbx-1232 .edit:focus-visible{outline:2px solid #30594f;outline-offset:6px}
@media(prefers-reduced-motion:reduce){.tbx-1232 *, .tbx-1232 *::before,.tbx-1232 *::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Article, Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーできないことがあります。必要な情報・操作はホバー以外でも利用できるようにしてください。
Browser：最新版Chrome・Safari・Firefox・Edgeをご使用ください。
Reduced Motion：prefers-reduced-motion: reduce対応。