Live Demo
マウスを乗せるかTabキーでフォーカスして動きを確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1032" type="button" aria-label="作品を表示"><span class="tbx-1032__photo"><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%23eed6d6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23bc8c9f%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%23ffdf99%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%23544e78%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%23bc8c9f%22%2F%3E%3Cpath%20d%3D%22M0%20394%20Q140%20345%20285%20387%20T640%20368%20L640%20420%20L0%20420Z%22%20fill%3D%22%23544e78%22%20opacity%3D%22.28%22%2F%3E%3C%2Fsvg%3E" alt="夕暮れの山のイラスト"></span><span class="tbx-1032__caption">Dusk Collection</span></button>
CSS
.tbx-1032{display:grid;justify-items:center;gap:9px;width:min(232px,100%);padding:8px;border:0;background:transparent;color:#28405b;cursor:pointer;perspective:750px}
.tbx-1032__photo{display:block;width:100%;aspect-ratio:1.65;overflow:hidden;border-radius:7px;box-shadow:0 9px 18px #17374c22;transform:rotateX(0) rotateY(0);transition:transform .5s cubic-bezier(.2,.8,.25,1),box-shadow .5s ease}
.tbx-1032 img{display:block;width:100%;height:100%;object-fit:cover}
.tbx-1032__caption{font:700 12px/1.3 system-ui,sans-serif}
.tbx-1032:is(:hover,:focus-visible) .tbx-1032__photo{transform:rotateX(8deg) rotateY(-9deg);box-shadow:10px 17px 24px #17374c2c}
.tbx-1032:focus-visible{outline:3px solid #855fc2;outline-offset:4px;border-radius:5px}
@media(hover:none){.tbx-1032__photo{transform:none!important}}
@media(prefers-reduced-motion:reduce){.tbx-1032__photo{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に対応。