Live Demo
マウスを重ねるか、Tabキーによるフォーカスで変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1045" tabindex="0" aria-label="デスクライトの写真を切り替え"><img class="tbx-1045__front" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20258%22%3E%3Crect%20width%3D%22400%22%20height%3D%22258%22%20fill%3D%22%23f0e9dd%22%2F%3E%3Cpath%20d%3D%22M0%20208H400V258H0Z%22%20fill%3D%22%23d4c3ac%22%2F%3E%3Cellipse%20cx%3D%22210%22%20cy%3D%22216%22%20rx%3D%22103%22%20ry%3D%2212%22%20fill%3D%22%23b8a691%22%20opacity%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M155%20170%20L200%2086%20L230%20170%22%20stroke%3D%22%2338556a%22%20stroke-width%3D%2212%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M170%2095%20L230%2095%20L245%20131%20L155%20131Z%22%20fill%3D%22%23d47954%22%2F%3E%3Cellipse%20cx%3D%22215%22%20cy%3D%22194%22%20rx%3D%2238%22%20ry%3D%228%22%20fill%3D%22%233e5263%22%2F%3E%3Cpath%20d%3D%22M215%20175V192%22%20stroke%3D%22%2338556a%22%20stroke-width%3D%2210%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%2287%22%20r%3D%229%22%20fill%3D%22%23eac58c%22%2F%3E%3C%2Fsvg%3E" alt="デスクライト正面のイメージ"><img class="tbx-1045__back" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20258%22%3E%3Crect%20width%3D%22400%22%20height%3D%22258%22%20fill%3D%22%23f0e9dd%22%2F%3E%3Cpath%20d%3D%22M0%20208H400V258H0Z%22%20fill%3D%22%23d4c3ac%22%2F%3E%3Cellipse%20cx%3D%22210%22%20cy%3D%22216%22%20rx%3D%22103%22%20ry%3D%2212%22%20fill%3D%22%23b8a691%22%20opacity%3D%22.45%22%2F%3E%3Cpath%20d%3D%22M152%20165%20L235%20103%20L235%20165%22%20stroke%3D%22%2338556a%22%20stroke-width%3D%2212%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M202%20108%20L266%2098%20L276%20129%20L208%20137Z%22%20fill%3D%22%23d47954%22%2F%3E%3Cellipse%20cx%3D%22215%22%20cy%3D%22194%22%20rx%3D%2238%22%20ry%3D%228%22%20fill%3D%22%233e5263%22%2F%3E%3Cpath%20d%3D%22M215%20175V192%22%20stroke%3D%22%2338556a%22%20stroke-width%3D%2210%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%2287%22%20r%3D%229%22%20fill%3D%22%23eac58c%22%2F%3E%3C%2Fsvg%3E" alt="" aria-hidden="true"><span class="tbx-1045__label">FRONT / DETAIL</span></div>
CSS
.tbx-1045{position:relative;width:min(251px,100%);aspect-ratio:1.63;background:#f0e9dd;border-radius:9px;overflow:hidden;cursor:default;box-shadow:0 5px 13px #18314415}
.tbx-1045 img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:opacity .4s ease}.tbx-1045__back{opacity:0}
.tbx-1045__label{position:absolute;left:10px;bottom:10px;z-index:1;background:#fffed8e6;color:#3c4c59;padding:6px 9px;border-radius:3px;font:700 9px/1.2 system-ui;letter-spacing:.04em}
.tbx-1045:is(:hover,:focus-visible) .tbx-1045__back{opacity:1}
.tbx-1045:focus-visible{outline:3px solid #d28a57;outline-offset:3px}
@media(hover:none){.tbx-1045__back{opacity:1}}@media(prefers-reduced-motion:reduce){.tbx-1045 img{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
ECの商品画像一覧・商品詳細の画像切替
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末でも情報が欠落しない設計を基本とします。クリックで操作するサンプルはタップで確認できます。
Browser：最新のChrome・Firefox・Safari・Edge向けCSS。:has()を利用する素材は最新ブラウザを想定しています。
Reduced Motion：prefers-reduced-motion: reduceに対応。