How do I maintain space between sibling elements when scaling them up on mouse enter / hover ?
This is the specific issue that I am having:
"When a card is hovered on or marked as active, the scrolling animation stops, the card expands pushing the neighboring cards aside to maintain a consistent gap, and information is displayed over the cards background."
I have all of that covered except: "maintain a consistent gap", I've tried both transform: scale() and scale: value and the expanding card doesn't push out the others. Pictures below in comments.
If you would like the full brief, it's a pretty challenging test project (Let's see you tackle this without any packages Kevin!) :
Behaviour – Desktop
The carousel contains a series of cards, that auto-scroll and reset back to the start when the ending is reached. Each card has it’s own background image with no text (the text/logo shown is baked into the image). When a card is hovered on or marked as active, the scrolling animation stops, the card expands pushing the neighboring cards aside to maintain a consistent gap, and information is displayed over the cards background. Each card has it’s own unique title and description, but the button text stays consistent. The card’s background also changes to a video that plays when hovered and is unique to each card. The carousel can be dragged by the user by clicking + dragging or hold swiping an active card in a given direction. Clicking the arrows will slide the carousel over by one card in the respective direction.
Design – Mobile
Behaviour – Mobile
The carousel contains a series of cards, with the next/previous card poking into view from outside of the viewport. Swiping in either direction will move the carousel to the next card. As the cards move, the dost indicator below the card will reflect the change by having the corresponding dot grow. When the dot grows, the other dots should move aside, maintaining a consistent gap between all dots. Each card will have it’s own image, title, and description but the button text will remain the same.
"When a card is hovered on or marked as active, the scrolling animation stops, the card expands pushing the neighboring cards aside to maintain a consistent gap, and information is displayed over the cards background."
I have all of that covered except: "maintain a consistent gap", I've tried both transform: scale() and scale: value and the expanding card doesn't push out the others. Pictures below in comments.
If you would like the full brief, it's a pretty challenging test project (Let's see you tackle this without any packages Kevin!) :
Behaviour – Desktop
The carousel contains a series of cards, that auto-scroll and reset back to the start when the ending is reached. Each card has it’s own background image with no text (the text/logo shown is baked into the image). When a card is hovered on or marked as active, the scrolling animation stops, the card expands pushing the neighboring cards aside to maintain a consistent gap, and information is displayed over the cards background. Each card has it’s own unique title and description, but the button text stays consistent. The card’s background also changes to a video that plays when hovered and is unique to each card. The carousel can be dragged by the user by clicking + dragging or hold swiping an active card in a given direction. Clicking the arrows will slide the carousel over by one card in the respective direction.
Design – Mobile
Behaviour – Mobile
The carousel contains a series of cards, with the next/previous card poking into view from outside of the viewport. Swiping in either direction will move the carousel to the next card. As the cards move, the dost indicator below the card will reflect the change by having the corresponding dot grow. When the dot grows, the other dots should move aside, maintaining a consistent gap between all dots. Each card will have it’s own image, title, and description but the button text will remain the same.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
