Live Demo
マウスを乗せるかTabキーでフォーカスして、動きの変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1210"><a class="tbx-1210-window" href="#tbx-1210-detail" aria-label="View landscape project"><span class="tbx-1210-landscape" aria-hidden="true"><i class="tbx-1210-sun"></i><i class="tbx-1210-hill a"></i><i class="tbx-1210-hill b"></i></span><span class="tbx-1210-label"><b>ARCHIVE / 08</b><small>VIEW PROJECT ↗</small></span></a></div>CSS
.tbx-1210{box-sizing:border-box}
.tbx-1210{display:grid;place-items:center;width:100%;min-height:182px;padding:13px;background:#eaf1f0;font-family:Arial,sans-serif}.tbx-1210 *{box-sizing:border-box}.tbx-1210-window{display:block;position:relative;width:min(100%,290px);height:154px;text-decoration:none;color:#284442;outline-offset:4px}.tbx-1210-landscape{display:block;position:absolute;inset:0 0 18px 0;overflow:hidden;background:linear-gradient(#a5c7d0 0 46%,#eacba5 47% 100%);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path .6s cubic-bezier(.2,.8,.2,1),transform .6s}.tbx-1210-sun{position:absolute;top:20px;right:56px;width:48px;height:48px;border-radius:50%;background:#fff4c5}.tbx-1210-hill{position:absolute;bottom:-30px;width:250px;height:110px;transform:rotate(-20deg);background:#587d70;border-radius:55%}.tbx-1210-hill.a{left:-65px}.tbx-1210-hill.b{right:-110px;bottom:-48px;background:#355d63}.tbx-1210-label{position:absolute;left:12px;right:12px;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;letter-spacing:.08em}.tbx-1210-label small{font-size:9px;opacity:0;transform:translateY(-9px);transition:transform .4s,opacity .4s}.tbx-1210-window:is(:hover,:focus-visible) .tbx-1210-landscape{clip-path:polygon(8% 0,92% 0,100% 20%,100% 82%,90% 100%,10% 100%,0 80%,0 18%);transform:scale(.95)}.tbx-1210-window:is(:hover,:focus-visible) .tbx-1210-label small{transform:translateY(0);opacity:1}.tbx-1210-window:focus-visible{outline:3px solid #446e72}
@media (prefers-reduced-motion:reduce){.tbx-1210 *, .tbx-1210 *::before, .tbx-1210 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Gallery / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報をホバーでしか見られない構造にしないでください。
Browser：CSSの:has()を使用する素材は最近のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduceに対応。