Live Demo
マウスでホバー、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#" class="tb-tip-image tb-tip-image--zoom" aria-label="制作事例を見る"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MjAiIGhlaWdodD0iMzIwIiB2aWV3Qm94PSIwIDAgNTIwIDMyMCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIHN0b3AtY29sb3I9IiM3Q0M0QzYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM0NzY2OEIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNTIwIiBoZWlnaHQ9IjMyMCIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjM3MCIgY3k9IjgzIiByPSI0MyIgZmlsbD0iI0ZGRTNBNSIvPjxwYXRoIGQ9Ik0wIDMwMEwxMzUgMTM3TDI0NSAyNjdMMzE4IDE4N0w1MjAgMzIwSDBaIiBmaWxsPSIjMjM0NTY1Ii8+PHBhdGggZD0iTTAgMzIwTDE1MCAyMTJMMjk1IDMyMFoiIGZpbGw9IiMzQzc3OEMiLz48L3N2Zz4=" alt="山並みのイラスト"><span>制作事例を見る ↗</span></a>CSS
.tb-tip-image{display:block;position:relative;overflow:hidden;width:min(320px,100%);height:195px;border-radius:9px;box-shadow:0 8px 24px #13345719;color:white;text-decoration:none}
.tb-tip-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.tb-tip-image span{position:absolute;inset:auto 0 0;padding:18px;font:600 14px system-ui;background:linear-gradient(transparent,#071e3bbb)}
.tb-tip-image:hover img,.tb-tip-image:focus-visible img{transform:scale(1.15)}
.tb-tip-image:focus-visible{outline:3px solid #7360cd;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.tb-tip-image img{transition:none}}How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
制作実績・写真ギャラリー
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではフォーカス・クリック時の表示も確認してください。
Browser：モダンブラウザのCSS機能を使用。
Reduced Motion：prefers-reduced-motionに対応。