Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#photo" class="tbx-1174"><span class="tbx-1174__photo"><svg viewBox="0 0 320 195" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g1174" x2="0" y2="1"><stop stop-color="#bbc8b5"/><stop offset="1" stop-color="#466979"/></linearGradient></defs><rect width="320" height="195" fill="url(#g1174)"/><circle cx="88" cy="48" r="24" fill="#f7d793"/><path d="M0 147 59 95 121 125 196 59 258 129 320 86V195H0" fill="#5e8f81"/><path d="M0 170 104 128 164 162 233 104 320 148V195H0" fill="#204c59"/><path d="M0 184Q80 156 142 184T320 169" stroke="#85c3b9" stroke-width="2" fill="none"/></svg></span><span class="tbx-1174__veil" aria-hidden="true"></span><span class="tbx-1174__copy">LANDSCAPE STUDY <i aria-hidden="true">↗</i></span></a>
CSS
.tbx-1174{box-sizing:border-box;position:relative;display:block;width:280px;max-width:100%;height:195px;overflow:hidden;border-radius:10px;text-decoration:none;color:white;background:#386a73}.tbx-1174__photo,.tbx-1174__photo svg{position:absolute;inset:0;width:100%;height:100%;display:block}.tbx-1174__veil{position:absolute;inset:0;background-color:#18384980;background-image:radial-gradient(circle,#e5f8eeaa 1.3px,transparent 1.6px);background-size:7px 7px;transform:translateX(0);transition:transform .64s cubic-bezier(.2,.77,.3,1);will-change:transform}.tbx-1174__copy{position:absolute;inset:auto 0 0;padding:36px 17px 15px;background:linear-gradient(transparent,#102a36c9);display:flex;justify-content:space-between;font:700 10px system-ui;letter-spacing:.12em}.tbx-1174__copy i{font:normal 20px system-ui}.tbx-1174:is(:hover,:focus-visible) .tbx-1174__veil{transform:translateX(101%)}.tbx-1174:focus-visible{outline:3px solid #247c8a;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1174, .tbx-1174 *, .tbx-1174::before, .tbx-1174::after, .tbx-1174 *::before, .tbx-1174 *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Gallery / Editorial
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても必要な情報にアクセスできる実装を推奨。
Browser：Chrome・Firefox・Safari・Edgeの現行版を想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。