Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#portfolio" class="tbx-1161" aria-label="Ocean studyの作品を見る"><span class="tbx-1161__art" aria-hidden="true"><svg viewBox="0 0 320 190" preserveAspectRatio="xMidYMid slice"><defs><linearGradient id="tb1161sky" x2="0" y2="1"><stop stop-color="#f5b78d"/><stop offset=".55" stop-color="#dfe5c8"/><stop offset="1" stop-color="#77a9a5"/></linearGradient></defs><rect width="320" height="190" fill="url(#tb1161sky)"/><circle cx="232" cy="45" r="22" fill="#fff0b2"/><path d="M0 125 48 79 84 122 136 54 205 125 260 82 320 128V190H0" fill="#4f8177"/><path d="M0 146 90 117 135 153 212 98 320 146V190H0" fill="#225464"/><path d="M0 161Q110 144 190 160T320 163V190H0" fill="#102f48"/></svg></span><span class="tbx-1161__color" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span><span class="tbx-1161__title">OCEAN STUDY <small>PORTFOLIO / 24</small></span></a>
CSS
.tbx-1161{box-sizing:border-box;display:block;position:relative;width:272px;max-width:100%;height:170px;overflow:hidden;text-decoration:none;color:#fff;border:5px solid #fff;box-shadow:0 6px 20px #203b4829;background:#1f5364;isolation:isolate}.tbx-1161__art{display:block;inset:0;position:absolute}.tbx-1161__art svg{display:block;width:100%;height:100%}.tbx-1161__color{position:absolute;inset:0;display:flex;pointer-events:none;z-index:1}.tbx-1161__color i{display:block;flex:1;background:rgba(255,255,255,.02);-webkit-backdrop-filter:grayscale(1);backdrop-filter:grayscale(1);transform:scaleY(1);transform-origin:bottom;transition:transform .48s cubic-bezier(.22,.85,.15,1)}.tbx-1161__color i:nth-child(2){transition-delay:.06s}.tbx-1161__color i:nth-child(3){transition-delay:.12s}.tbx-1161__color i:nth-child(4){transition-delay:.18s}.tbx-1161__color i:nth-child(5){transition-delay:.24s}.tbx-1161__title{position:absolute;inset:auto 0 0;padding:24px 12px 10px;display:flex;justify-content:space-between;align-items:end;gap:8px;background:linear-gradient(transparent,#061e35bb);z-index:2;font:850 11px system-ui,sans-serif;letter-spacing:.07em}.tbx-1161__title small{font-size:8px;color:#e6eeeb}.tbx-1161:is(:hover,:focus-visible) .tbx-1161__color i{transform:scaleY(0)} .tbx-1161:focus-visible{outline:3px solid #356d73;outline-offset:3px}
@media (prefers-reduced-motion: reduce) {.tbx-1161, .tbx-1161 *, .tbx-1161::before, .tbx-1161::after, .tbx-1161 *::before, .tbx-1161 *::after {animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Gallery / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても操作・情報取得ができるようにしてください。
Browser：最近のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。