-
Notifications
You must be signed in to change notification settings - Fork 1
Open
Milestone
Description
Summary
Add a Pile theme-inspired hover effect for stacked Cards Collection blocks. Activated via the u-collection-hover-pile body class (controlled by Style Manager).
What this does
- At rest: Only the image is visible; title and meta are hidden (
opacity: 0) - On hover: Image dims via NB's Overlay Filter system, content fades in with directional slides:
- Title: fade + slight upward slide (centered)
- First meta: slides down from top edge
- Last meta: slides up from bottom edge
- Content overlay covers the full card, making the entire card clickable via the media link
- Inner container uses
flex-direction: column; justify-content: space-betweento distribute meta/title
Editor support
- Scoped editor rules for content layout in stacked cards
- Works with NB's
display: grid !importanteditor layout
Scope
- Only applies to stacked card layouts (
nb-supernova--card-layout-stacked) - Only on devices with hover capability (
@media (hover: hover)) - Excludes single-column (hero) blocks
Files
src/scss/utility/_collection-hover-pile.scss(new) — hover effect CSSsrc/scss/utility.scss— imports the new filedist/css/utility.css,dist/css/utility-rtl.css— compiled output
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels