Live Demo
素材の上にマウスを乗せるか、Tabキーでフォーカスして確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1187" href="#service"><span class="tbx-1187__top"><small>WHAT'S INCLUDED / 03</small><strong>Creative direction</strong><em>Discover what we do ↗</em></span><span class="tbx-1187__fold" aria-hidden="true"></span><span class="tbx-1187__notes"><i>01 Strategy</i><i>02 Identity</i><i>03 Delivery</i></span></a>
CSS
.tbx-1187{box-sizing:border-box;position:relative;display:block;width:275px;max-width:100%;height:172px;background:#f8eee6;border:1px solid #e3cbbd;border-radius:7px;color:#4c3440;text-decoration:none;overflow:hidden;font-family:system-ui,sans-serif;perspective:600px}.tbx-1187__top{position:relative;z-index:2;display:grid;gap:11px;padding:18px 17px}.tbx-1187__top small{font:800 9px system-ui;letter-spacing:.12em;color:#ae7f6c}.tbx-1187__top strong{font:700 22px/1.08 Georgia,serif}.tbx-1187__top em{font-size:10px;font-weight:750;font-style:normal}.tbx-1187__fold{position:absolute;z-index:1;bottom:0;right:0;width:98px;height:98px;background:linear-gradient(135deg,#e4b3a1 0%,#d08c79 49%,#a05c55 50%);clip-path:polygon(0 100%,100% 0,100% 100%);transform-origin:100% 100%;transition:transform .5s cubic-bezier(.2,.8,.2,1)}.tbx-1187__notes{position:absolute;bottom:13px;left:17px;display:flex;flex-direction:column;gap:5px;transform:translateY(15px);opacity:0;transition:transform .4s,opacity .3s}.tbx-1187__notes i{font:750 9px system-ui;font-style:normal;color:#a05b5a}.tbx-1187:is(:hover,:focus-visible) .tbx-1187__fold{transform:rotateY(-53deg) translate(-12px,-7px)}.tbx-1187:is(:hover,:focus-visible) .tbx-1187__notes{transform:translateY(0);opacity:1}.tbx-1187:focus-visible{outline:3px solid #c16e5d;outline-offset:3px}
@media (prefers-reduced-motion:reduce) {.tbx-1187,.tbx-1187 *,.tbx-1187::before,.tbx-1187::after,.tbx-1187 *::before,.tbx-1187 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Service / Features
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末で重要情報をホバーのみに隠さないよう実案件で調整してください。
Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。一部の表現ではCSS :has()を利用。
Reduced Motion：prefers-reduced-motion: reduce に対応。