Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1126" href="#scenery"><span class="tbx-1126__land" aria-hidden="true"><i></i><b></b></span><span class="tbx-1126__lines" aria-hidden="true"></span><span class="tbx-1126__caption"><small>LANDSCAPE / 021</small><strong>地形と景色</strong><b>↗</b></span></a>CSS
.tbx-1126{display:block;position:relative;width:min(285px,100%);height:186px;overflow:hidden;border-radius:7px;background:#62868c;color:#fff;text-decoration:none;font-family:system-ui,sans-serif;isolation:isolate}.tbx-1126__land{position:absolute;inset:0;background:linear-gradient(180deg,#a5c7cb 0%,#779dab 61%,#48677e 61%);transition:filter .4s}.tbx-1126__land i{position:absolute;bottom:0;left:-10%;width:85%;height:110px;background:#3a6468;clip-path:polygon(0 100%,35% 10%,60% 60%,90% 20%,100% 100%)}.tbx-1126__land b{position:absolute;bottom:0;right:-8%;width:77%;height:121px;background:#264d60;clip-path:polygon(0 100%,43% 0,100% 80%,100% 100%)}.tbx-1126__lines{position:absolute;inset:0;opacity:0;background:repeating-radial-gradient(ellipse at 70% 24%,transparent 0 11px,#f6e6bc85 12px 13px,transparent 14px 25px);mix-blend-mode:screen;transform:scale(1.35);transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .45s}.tbx-1126__caption{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:9px;padding:16px;background:linear-gradient(transparent,#1a394de8);transform:translateY(12px);transition:transform .4s}.tbx-1126__caption small{position:absolute;left:17px;bottom:47px;font-size:8px;letter-spacing:.13em}.tbx-1126__caption strong{font-size:15px}.tbx-1126__caption b{margin-left:auto;font-size:21px;font-weight:400}.tbx-1126:is(:hover,:focus-visible) .tbx-1126__lines{opacity:1;transform:scale(1)}.tbx-1126:is(:hover,:focus-visible) .tbx-1126__land{filter:brightness(.8)}.tbx-1126:is(:hover,:focus-visible) .tbx-1126__caption{transform:translateY(0)}.tbx-1126:focus-visible{outline:3px solid #dfc98d;outline-offset:4px}@media(prefers-reduced-motion:reduce){.tbx-1126 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Gallery / Editorial
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報は通常時から見える状態にしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。