Live Demo
対象要素をマウスでホバー、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1282" tabindex="0" role="img" aria-label="作品ポスターの切り抜きが開いて詳細情報が現れる演出"><div class="tbx-1282__back"><b>STUDIO</b><span>Collection / 2026</span><small>VIEW PROJECT ↗</small></div><div class="tbx-1282__front"><div class="tbx-1282__sun"></div><div class="tbx-1282__hill"></div><strong>FIELD<br/>NOTES</strong></div><span class="tbx-1282__tear" aria-hidden="true"></span></div>
CSS
.tbx-1282{box-sizing:border-box;display:block;position:relative;width:280px;max-width:100%;height:172px;overflow:hidden;border-radius:8px;background:#122d40;isolation:isolate;cursor:pointer}
.tbx-1282__back{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:22px;background:#162e41;color:#eef7ed;font-family:system-ui,sans-serif}
.tbx-1282__back b{font-size:25px;letter-spacing:.1em}.tbx-1282__back span{font-size:12px;color:#b6d1d8}.tbx-1282__back small{font-size:10px;letter-spacing:.13em;color:#f9d6a2}
.tbx-1282__front{position:absolute;inset:0;background:linear-gradient(130deg,#91bdb5,#c2d8cf 60%,#f3deb8);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path .65s cubic-bezier(.23,1,.32,1)}
.tbx-1282__sun{position:absolute;width:60px;height:60px;border-radius:50%;background:#fff1b9;right:38px;top:20px}
.tbx-1282__hill{position:absolute;bottom:-30px;left:-20px;width:250px;height:115px;transform:rotate(-25deg);background:#557e76}
.tbx-1282__front strong{position:absolute;left:20px;bottom:18px;color:#153f47;font:900 23px/.93 system-ui,sans-serif;letter-spacing:.1em}
.tbx-1282__tear{position:absolute;inset:0;pointer-events:none;border:1px dashed #fff9;opacity:.8}
.tbx-1282:hover .tbx-1282__front,.tbx-1282:focus-visible .tbx-1282__front{clip-path:polygon(0 0,29% 0,22% 12%,27% 24%,19% 36%,26% 48%,16% 60%,23% 73%,13% 85%,20% 100%,0 100%)}
.tbx-1282:focus-visible{outline:3px solid #50999f;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.tbx-1282__front{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Portfolio / Gallery
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバーと同じ結果にならないため、タップ・フォーカス時の動作も確認してください。
Browser：現行Chrome / Firefox / Edge / SafariのCSS機能を利用します。
Reduced Motion：prefers-reduced-motion: reduce でアニメーションを停止します。