Live Demo
ホバー操作、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div tabindex="0" class="tbx-1295" role="group" aria-label="リニューアル案件・成果表示"><span class="tbx-1295__eyebrow">CASE STUDY / 2026</span><strong>Website<br>renewal.</strong><span class="tbx-1295__rule"></span><div class="tbx-1295__result"><small>AVERAGE ENGAGEMENT</small><b>+38<span>%</span></b></div><span class="tbx-1295__arrow">↗</span></div>CSS
*{box-sizing:border-box}
.tbx-1295{width:284px;max-width:100%;height:164px;padding:17px 19px;position:relative;overflow:hidden;background:#f3f1e9;color:#23493d;border-radius:10px;border:1px solid #dddcd2;cursor:default;font-family:system-ui,sans-serif}.tbx-1295__eyebrow{font-size:9px;letter-spacing:.17em;color:#708e7d;font-weight:800}.tbx-1295>strong{display:block;font-size:27px;line-height:1.08;letter-spacing:-.055em;margin-top:16px;transition:transform .4s}.tbx-1295__rule{display:block;width:85%;height:1px;background:#abbbb0;margin-top:17px;transition:width .4s}.tbx-1295__result{position:absolute;bottom:0;left:0;right:0;height:96px;display:flex;align-items:center;justify-content:space-between;padding:15px 20px;background:#255547;color:white;transform:translateY(101%);transition:transform .42s}.tbx-1295__result small{max-width:110px;line-height:1.6;font-size:9px;letter-spacing:.11em}.tbx-1295__result b{font-size:42px;letter-spacing:-.07em}.tbx-1295__result b span{font-size:20px}.tbx-1295__arrow{position:absolute;top:13px;right:16px;font-size:20px;transition:transform .4s}.tbx-1295:hover .tbx-1295__result,.tbx-1295:focus-visible .tbx-1295__result{transform:translateY(0)}.tbx-1295:hover .tbx-1295__arrow,.tbx-1295:focus-visible .tbx-1295__arrow{transform:translate(3px,-3px)}.tbx-1295:focus-visible{outline:3px solid #5a9774;outline-offset:4px}
@media (prefers-reduced-motion:reduce){.tbx-1295 *,.tbx-1295::before,.tbx-1295::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Portfolio / Business
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバー動作が異なるため、フォーカス操作・実案件のタップ操作を確認してください。
Browser：Chrome / Firefox / Edge / Safariの標準CSS機能を使用します。
Reduced Motion：prefers-reduced-motion: reduceでCSSアニメーション・トランジションを停止します。