/* WebPies — hover-reveal: reusable floating image preview + circular badge that follow the cursor when hovering items inside a [data-hover-reveal] container. Compiled from scss/components-hover-reveal.scss. USAGE (drop into any page/section):

View→

…trigger / card… …another trigger…

Each element with [data-img] is a trigger; data-view sets the badge label. hover-reveal.js wires it (desktop pointer only) and re-parents the followers to . On touch the followers hide and triggers behave normally. */ [data-hover-reveal]{ position: relative; } /* spotlight: dim the other triggers, highlight the hovered one */ [data-hover-reveal].hr-active [data-img]{ opacity: .5; transition: opacity .35s ease; } [data-hover-reveal].hr-active [data-img].is-hover{ opacity: 1; } [data-hover-reveal].hr-active{ cursor: none; } /* floating image preview */ .pr-cursor{ position: fixed; top: 0; left: 0; z-index: 80; width: 230px; height: 290px; border-radius: 14px; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%,-50%) scale(.8) rotate(-4deg); box-shadow: 0 30px 60px -24px rgba(13,15,18,.6); transition: opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1), visibility .4s; } .pr-cursor.show{ opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1) rotate(-4deg); } .pr-cursor-img{ width: 100%; height: 100%; object-fit: cover; display: block; } /* circular badge cursor */ .view-badge{ position: fixed; top: 0; left: 0; z-index: 81; width: 96px; height: 96px; border-radius: 999px; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1.5px solid var(--lime-deep); background: rgba(200,242,92,.1); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); color: var(--ink); opacity: 0; visibility: hidden; transform: translate(-50%,-50%) scale(.35); transition: opacity .3s ease, transform .45s cubic-bezier(.16,1,.3,1), visibility .3s; } .view-badge.show{ opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1); } .view-badge .vb-text{ font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; line-height: 1; } .view-badge .vb-arrow{ font-size: 13px; line-height: 1; margin-top: 4px; } html.theme-dark .view-badge{ color: var(--cream); border-color: var(--lime); background: rgba(200,242,92,.14); } @media (hover: none), (pointer: coarse){ .pr-cursor, .view-badge{ display: none; } [data-hover-reveal].hr-active{ cursor: auto; } [data-hover-reveal].hr-active [data-img]{ opacity: 1; } } @media (prefers-reduced-motion: reduce){ .pr-cursor, .view-badge{ transition: opacity .2s ease, visibility .2s; } .pr-cursor{ transform: translate(-50%,-50%) scale(1) rotate(0deg); } .pr-cursor.show{ transform: translate(-50%,-50%) scale(1) rotate(0deg); } }