Live Demo
マウスでホバーするかTabキーで対象にフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1257"><button class="photo" type="button" aria-label="作品写真の撮影情報を表示"><span class="land"><i class="sun"></i><i class="ridge one"></i><i class="ridge two"></i></span><span class="film" aria-hidden="true"><span class="perfs">··············</span><span class="lower">FRAME 008 / EDITION 01</span></span></button></div>CSS
.tbx-1257{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:218px;overflow:visible;padding:24px 18px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#243e43}
.tbx-1257 *,.tbx-1257 *::before,.tbx-1257 *::after{box-sizing:border-box}
.tbx-1257{background:#dce5e1}
.tbx-1257 .photo{border:0;position:relative;width:min(286px,100%);aspect-ratio:1.65;background:#1c292c;overflow:hidden;cursor:pointer;padding:0;box-shadow:0 12px 25px #233f4030}
.tbx-1257 .land{position:absolute;inset:0;background:linear-gradient(160deg,#8db7ad,#4f8296 51%,#314c5a);transition:inset .52s cubic-bezier(.2,.8,.2,1),filter .5s}
.tbx-1257 .sun{position:absolute;right:43px;top:24px;width:43px;height:43px;border-radius:50%;background:#fff0bd}
.tbx-1257 .ridge{position:absolute;bottom:-42%;width:85%;height:85%;transform:rotate(45deg);background:#24526b}
.tbx-1257 .one{left:-15%}
.tbx-1257 .two{right:-34%;bottom:-54%;background:#19364b}
.tbx-1257 .film{position:absolute;inset:0;color:white;pointer-events:none}
.tbx-1257 .perfs{position:absolute;top:3px;left:6px;color:#d7d2bb;letter-spacing:5px;font-size:9px;opacity:0;transition:opacity .3s}
.tbx-1257 .lower{position:absolute;bottom:7px;left:16px;font-size:9px;font-weight:650;letter-spacing:.15em;opacity:0;transform:translateY(9px);transition:opacity .34s,transform .34s}
.tbx-1257 .photo:is(:hover,:focus-visible) .land{inset:12px 12px 28px;filter:saturate(.75)}
.tbx-1257 .photo:is(:hover,:focus-visible) .perfs,.tbx-1257 .photo:is(:hover,:focus-visible) .lower{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce) {.tbx-1257 *, .tbx-1257 *::before, .tbx-1257 *::after { transition-duration:0.01ms !important; animation-duration:0.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Portfolio, Gallery
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーが利用できない場合があります。リンク・入力操作をホバー専用にしないでください。
Browser：Chrome・Firefox・Safari・Edgeの現行版を推奨。:has()利用素材は現行版で確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。