Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1162" href="#destination"><span class="tbx-1162__picture" aria-hidden="true"><svg viewBox="0 0 320 190" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="tb1162g" x2="0" y2="1"><stop stop-color="#a9d8df"/><stop offset="1" stop-color="#f6d4a4"/></linearGradient></defs><rect width="320" height="190" fill="url(#tb1162g)"/><path d="M0 100 78 50 138 92 199 29 265 106 320 88V190H0" fill="#899e8b"/><path d="M0 143 60 109 123 149 175 93 258 146 320 124V190H0" fill="#3c6970"/><path d="M0 165Q150 142 320 170V190H0" fill="#28505e"/></svg></span><span class="tbx-1162__stamp" aria-hidden="true">FIELD<br>NOTES<span>✦</span>04 / 26</span><span class="tbx-1162__foot"><strong>ALPINE NOTES</strong><em>View story ↗</em></span></a>
CSS
.tbx-1162{box-sizing:border-box;display:block;position:relative;width:272px;max-width:100%;height:176px;background:#a9c8cc;border:6px solid #fff;box-shadow:0 5px 16px #28455828;color:#fff;overflow:hidden;text-decoration:none}.tbx-1162__picture{position:absolute;inset:0;display:block;transition:transform .55s cubic-bezier(.2,.8,.2,1)}.tbx-1162__picture svg{height:100%;width:100%;display:block}.tbx-1162__stamp{position:absolute;top:13px;right:13px;width:72px;height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px dashed #fff;background:#244751d9;border-radius:50%;transform:rotate(-32deg) scale(.55);opacity:0;font:800 9px/1.15 system-ui,sans-serif;letter-spacing:.13em;text-align:center;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .24s}.tbx-1162__stamp span{font-size:15px;padding:1px}.tbx-1162__foot{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:end;justify-content:space-between;gap:6px;padding:20px 11px 9px;background:linear-gradient(transparent,#173842dd);font:800 11px system-ui,sans-serif;letter-spacing:.04em}.tbx-1162__foot em{font-size:9px;font-style:normal;transform:translateY(12px);opacity:0;transition:opacity .3s,transform .3s}.tbx-1162:is(:hover,:focus-visible) .tbx-1162__stamp{opacity:1;transform:rotate(10deg) scale(1)}.tbx-1162:is(:hover,:focus-visible) .tbx-1162__picture{transform:scale(1.09)}.tbx-1162:is(:hover,:focus-visible) .tbx-1162__foot em{opacity:1;transform:translateY(0)}.tbx-1162:focus-visible{outline:3px solid #3e7180;outline-offset:3px}
@media (prefers-reduced-motion: reduce) {.tbx-1162, .tbx-1162 *, .tbx-1162::before, .tbx-1162::after, .tbx-1162 *::before, .tbx-1162 *::after {animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Travel / Gallery
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても操作・情報取得ができるようにしてください。
Browser：最近のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。