Live Demo
マウスでホバー、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#" class="tb-tip-image tb-tip-image--reveal" aria-label="作品の詳細を見る"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MjAiIGhlaWdodD0iMzIwIiB2aWV3Qm94PSIwIDAgNTIwIDMyMCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4Mj0iMSIgeTI9IjEiPjxzdG9wIHN0b3AtY29sb3I9IiM3Q0M0QzYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM0NzY2OEIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNTIwIiBoZWlnaHQ9IjMyMCIgZmlsbD0idXJsKCNnKSIvPjxjaXJjbGUgY3g9IjM3MCIgY3k9IjgzIiByPSI0MyIgZmlsbD0iI0ZGRTNBNSIvPjxwYXRoIGQ9Ik0wIDMwMEwxMzUgMTM3TDI0NSAyNjdMMzE4IDE4N0w1MjAgMzIwSDBaIiBmaWxsPSIjMjM0NTY1Ii8+PHBhdGggZD0iTTAgMzIwTDE1MCAyMTJMMjk1IDMyMFoiIGZpbGw9IiMzQzc3OEMiLz48L3N2Zz4=" alt="山並みのイラスト"><span>VIEW PROJECT <b aria-hidden="true">↗</b></span></a>CSS
.tb-tip-image{display:block;position:relative;overflow:hidden;width:min(320px,100%);height:195px;border-radius:9px;color:#fff;text-decoration:none;font:700 14px system-ui}
.tb-tip-image img{width:100%;height:100%;object-fit:cover;display:block}
.tb-tip-image::after{content:"";position:absolute;inset:0;background:#142d56b8;opacity:0;transition:opacity .3s ease}
.tb-tip-image span{position:absolute;z-index:1;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .3s ease}
.tb-tip-image:hover::after,.tb-tip-image:focus-visible::after,.tb-tip-image:hover span,.tb-tip-image:focus-visible span{opacity:1}
.tb-tip-image:hover span,.tb-tip-image:focus-visible span{transform:translateY(0)}
.tb-tip-image:focus-visible{outline:3px solid #7360cd;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.tb-tip-image::after,.tb-tip-image span{transition:none}}How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
ポートフォリオ・施工事例
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではフォーカス・クリック時の表示も確認してください。
Browser：モダンブラウザのCSS機能を使用。
Reduced Motion：prefers-reduced-motionに対応。