Live Demo
素材の上にマウスを乗せるか、Tabキーでフォーカスして確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1185" href="#architecture" aria-label="海辺の建築プロジェクトを見る"><span class="tbx-1185__scene"><svg viewBox="0 0 360 210" preserveAspectRatio="xMidYMid slice" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><rect width="360" height="210" fill="#a5cfcd"/><circle cx="275" cy="59" r="27" fill="#ffe1a0"/><path d="M0 150 67 89 116 144 170 77 242 150 306 93 360 148V210H0" fill="#547d85"/><path d="M0 186 80 146 151 189 239 121 360 190V210H0" fill="#234d66"/><path d="M0 195Q90 171 180 193T360 185V210H0" fill="#123450"/></svg></span><span class="tbx-1185__grid" aria-hidden="true"><i></i><i></i><b>AXIS / 02</b><small>2400 × 1600</small></span><span class="tbx-1185__bottom">COASTAL RESIDENCE <b aria-hidden="true">↗</b></span></a>
CSS
.tbx-1185{box-sizing:border-box;display:block;position:relative;overflow:hidden;width:275px;max-width:100%;height:176px;border:5px solid white;box-shadow:0 5px 18px #23435b33;color:white;text-decoration:none;background:#245469;isolation:isolate}.tbx-1185__scene,.tbx-1185__scene svg{position:absolute;inset:0;width:100%;height:100%;display:block}.tbx-1185__scene{transition:filter .4s,transform .55s}.tbx-1185__grid{position:absolute;inset:13px;border:1px solid #fff0;opacity:0;transform:scale(.9);transition:opacity .33s,transform .45s,border-color .4s}.tbx-1185__grid::before,.tbx-1185__grid::after{content:"";position:absolute;background:#ffffff9a}.tbx-1185__grid::before{height:1px;width:100%;top:48%;left:0}.tbx-1185__grid::after{width:1px;height:100%;left:52%;top:0}.tbx-1185__grid i{position:absolute;width:15px;height:15px;border-color:white;border-style:solid}.tbx-1185__grid i:first-child{top:-1px;left:-1px;border-width:2px 0 0 2px}.tbx-1185__grid i:nth-child(2){bottom:-1px;right:-1px;border-width:0 2px 2px 0}.tbx-1185__grid b,.tbx-1185__grid small{position:absolute;background:#174252aa;font:750 9px system-ui;padding:3px 5px}.tbx-1185__grid b{right:0;top:0}.tbx-1185__grid small{left:0;bottom:0}.tbx-1185__bottom{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;padding:24px 11px 9px;background:linear-gradient(transparent,#092c40b8);font:850 10px system-ui;letter-spacing:.09em}.tbx-1185:is(:hover,:focus-visible) .tbx-1185__scene{filter:contrast(.88) saturate(.8);transform:scale(1.04)}.tbx-1185:is(:hover,:focus-visible) .tbx-1185__grid{opacity:1;transform:scale(1);border-color:#ffffffba}.tbx-1185:focus-visible{outline:3px solid #267e86;outline-offset:3px}
@media (prefers-reduced-motion:reduce) {.tbx-1185,.tbx-1185 *,.tbx-1185::before,.tbx-1185::after,.tbx-1185 *::before,.tbx-1185 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Portfolio / Architecture
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末で重要情報をホバーのみに隠さないよう実案件で調整してください。
Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。一部の表現ではCSS :has()を利用。
Reduced Motion：prefers-reduced-motion: reduce に対応。