Live Demo
マウスを乗せるかTabキーでフォーカスして動きを確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1031" type="button" aria-label="風景作品を表示"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20420%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22s%22%20x1%3D%220%22%20x2%3D%220%22%20y1%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23c6e2f2%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235d9ac2%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22640%22%20height%3D%22420%22%20fill%3D%22url%28%23s%29%22%2F%3E%3Ccircle%20cx%3D%22478%22%20cy%3D%22105%22%20r%3D%2243%22%20fill%3D%22%23ffedbd%22%2F%3E%3Cpath%20d%3D%22M0%20310%20L140%20146%20L253%20283%20L350%20191%20L486%20319%20L640%20203%20L640%20420%20L0%20420Z%22%20fill%3D%22%2323536b%22%20opacity%3D%22.83%22%2F%3E%3Cpath%20d%3D%22M0%20385%20L175%20256%20L326%20369%20L468%20295%20L640%20395%20L640%20420%20L0%20420Z%22%20fill%3D%22%235d9ac2%22%2F%3E%3Cpath%20d%3D%22M0%20394%20Q140%20345%20285%20387%20T640%20368%20L640%20420%20L0%20420Z%22%20fill%3D%22%2323536b%22%20opacity%3D%22.28%22%2F%3E%3C%2Fsvg%3E" alt="青い海岸と山のイラスト"><span class="tbx-1031__label">View Project ↗</span></button>
CSS
.tbx-1031{position:relative;display:block;width:min(235px,100%);aspect-ratio:1.55;overflow:hidden;padding:0;border:0;border-radius:7px;background:#b8cfdc;cursor:pointer}
.tbx-1031 img{display:block;width:100%;height:100%;object-fit:cover}
.tbx-1031::before,.tbx-1031::after{content:"";position:absolute;top:0;bottom:0;width:50%;background:#275b73e8;transition:transform .48s cubic-bezier(.24,.78,.2,1)}
.tbx-1031::before{left:0}.tbx-1031::after{right:0}.tbx-1031__label{position:absolute;left:50%;top:50%;z-index:2;white-space:nowrap;transform:translate(-50%,-50%);padding:7px 10px;background:#fff;color:#24506a;border-radius:4px;font:700 11px/1.35 system-ui;transition:opacity .22s}
.tbx-1031:is(:hover,:focus-visible)::before{transform:translateX(-101%)}.tbx-1031:is(:hover,:focus-visible)::after{transform:translateX(101%)}
.tbx-1031:is(:hover,:focus-visible) .tbx-1031__label{opacity:0}
.tbx-1031:focus-visible{outline:3px solid #855fc2;outline-offset:4px}
@media(hover:none){.tbx-1031::before,.tbx-1031::after{transform:translateX(-101%)}.tbx-1031::after{transform:translateX(101%)}.tbx-1031__label{opacity:0}}
@media(prefers-reduced-motion:reduce){.tbx-1031::before,.tbx-1031::after,.tbx-1031__label{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
制作実績・施設ギャラリー
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作が必要な素材はクリック・入力にも対応。hover専用装飾は重要情報を隠さない設計です。
Browser：最新のChrome、Firefox、Safari、Edge向けのCSS。複数環境で最終検証してください。
Reduced Motion：prefers-reduced-motion: reduceに対応。