Live Demo
マウスを乗せるか、Tabキーでフォーカスして動きを確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1198" href="#project" aria-label="作品番号18を見る"><span class="tbx-1198__art"><svg viewBox="0 0 320 190" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs><linearGradient id="sky1198" x2="0" y2="1"><stop stop-color="#91c5ca"/><stop offset="1" stop-color="#e8dbb0"/></linearGradient></defs><rect width="320" height="190" fill="url(#sky1198)"/><circle cx="228" cy="55" r="29" fill="#ffe7ab"/><path d="M0 131 60 63 125 133 167 84 222 144 271 100 320 147V190H0" fill="#64899a"/><path d="M0 162 77 113 148 178 220 118 320 171V190H0" fill="#34556f"/><path d="M0 181Q76 153 155 174T320 165V190H0" fill="#183e58"/></svg></span><span class="tbx-1198__corner" aria-hidden="true"></span><span class="tbx-1198__meta"><small>PROJECT 018</small><b>海辺の小さな家</b></span></a>
CSS
.tbx-1198{display:block;position:relative;overflow:hidden;width:274px;max-width:100%;height:180px;background:#8fc4c9;border:4px solid white;box-shadow:0 8px 19px #14384d2f;box-sizing:border-box;text-decoration:none;color:white}.tbx-1198__art,.tbx-1198__art svg{position:absolute;inset:0;width:100%;height:100%}.tbx-1198__corner{position:absolute;right:0;bottom:0;width:73px;height:73px;background:linear-gradient(135deg,#d1b480 49.7%,#fcf4dc 50%);clip-path:polygon(100% 0,100% 100%,0 100%);transform:translate(90%,90%);transition:transform .46s cubic-bezier(.22,.8,.22,1);z-index:2}.tbx-1198__meta{position:absolute;bottom:0;left:0;right:0;padding:16px 13px 10px;background:linear-gradient(transparent,#062d45cc);display:flex;flex-direction:column;gap:2px;transform:translateY(32px);transition:transform .4s}.tbx-1198__meta small{letter-spacing:.14em;font:650 9px system-ui}.tbx-1198__meta b{font:700 13px system-ui}.tbx-1198:is(:hover,:focus-visible) .tbx-1198__corner{transform:translate(0,0)}.tbx-1198:is(:hover,:focus-visible) .tbx-1198__meta{transform:translateY(0)}.tbx-1198:focus-visible{outline:3px solid #d09254;outline-offset:3px}
@media (prefers-reduced-motion: reduce) {.tbx-1198,.tbx-1198 *,.tbx-1198::before,.tbx-1198::after,.tbx-1198 *::before,.tbx-1198 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Portfolio / Gallery
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末で重要情報をホバー時にだけ隠さない設計にしてください。
Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。:has()およびclip-path等は対応ブラウザを確認。
Reduced Motion：prefers-reduced-motion: reduce 対応。