Live Demo
マウスを重ねるか、Tabキーによるフォーカスで変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1046" tabindex="0" aria-label="ギャラリー画像のフレーム演出"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20440%20280%22%3E%3Crect%20width%3D%22440%22%20height%3D%22280%22%20fill%3D%22%23dfe7e2%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2220%22%20width%3D%22400%22%20height%3D%22240%22%20rx%3D%2210%22%20fill%3D%22%23d4e4ec%22%2F%3E%3Cpath%20d%3D%22M20%20192%20L115%20100%20183%20170%20255%2083%20420%20206V260H20Z%22%20fill%3D%22%234d7888%22%2F%3E%3Cpath%20d%3D%22M20%20233L140%20154%20225%20234%20330%20145%20420%20223V260H20Z%22%20fill%3D%22%23244b65%22%2F%3E%3Ccircle%20cx%3D%22351%22%20cy%3D%2287%22%20r%3D%2231%22%20fill%3D%22%23f8dca4%22%2F%3E%3Cpath%20d%3D%22M20%20250q160%20-40%20400%200%22%20stroke%3D%22%238bb3a8%22%20stroke-width%3D%2215%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E" alt="山並みと太陽の風景イラスト"><span class="tbx-1046__label">PROJECT / 06</span><i aria-hidden="true"></i></div>
CSS
.tbx-1046{position:relative;width:min(255px,100%);aspect-ratio:1.65;padding:0;overflow:hidden;border-radius:7px;background:#d5e5e9;cursor:default}
.tbx-1046 img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.84);transition:filter .35s}
.tbx-1046:after{content:"";position:absolute;inset:11px;border:2px solid #fff9;border-radius:2px;opacity:0;transform:scale(.95);transition:opacity .34s,transform .34s}
.tbx-1046__label{position:absolute;z-index:1;left:16px;bottom:15px;color:white;font:800 10px/1.4 system-ui;letter-spacing:.09em;text-shadow:0 1px 6px #1e3548}
.tbx-1046 i{position:absolute;inset:auto 0 0;height:48px;background:linear-gradient(transparent,#142d506b)}
.tbx-1046:is(:hover,:focus-visible):after{opacity:1;transform:scale(1)}
.tbx-1046:is(:hover,:focus-visible) img{filter:saturate(1.1)}
.tbx-1046:focus-visible{outline:3px solid #d28a57;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.tbx-1046 img,.tbx-1046:after{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
作品集・建築実績・写真ポートフォリオ
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末でも情報が欠落しない設計を基本とします。クリックで操作するサンプルはタップで確認できます。
Browser：最新のChrome・Firefox・Safari・Edge向けCSS。:has()を利用する素材は最新ブラウザを想定しています。
Reduced Motion：prefers-reduced-motion: reduceに対応。