Kevin Powell - Community•14mo ago

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.

16 Replies

b1mind•14mo ago

Best to provide a minimal example of what you are doing, that wall of text does not really cut it. Also though you should be able to use scale without it changing position in the dom.

Zoë•14mo ago

Are you masking wanting others to do your work for you as a challenge? At least provide an image of what you want

b1mind•14mo ago

yea confused on this as well the title is like a direct question but the wall o text does not really explain the issue just the functions 🤔 ? So please clearify, examples are best #how-to-ask-good-questions

Zoë•14mo ago

It's too much text for me to read, so I've only actually read the first line, to see how the rest is formatted like

BrianCOP•14mo ago

no of course not

BrianCOP•14mo ago

hopefully this image helps, notice how that expanded card scales up, but doesn't push out the other cards? Here's my on mouse enter code

    function activateCard(this:HTMLElement) {
    
        const cardContainer: HTMLElement | null = this
        const activeFrame: HTMLElement | null = this.querySelector('.active-frame')
        if (activeFrame) {activeFrame.style.opacity = '100'}
        if (cardContainer) {cardContainer.style.transform = 'scale(1.1)'}
        
        const video = this.querySelector('video')
        video?.play()
    }

    function activateCard(this:HTMLElement) {
    
        const cardContainer: HTMLElement | null = this
        const activeFrame: HTMLElement | null = this.querySelector('.active-frame')
        if (activeFrame) {activeFrame.style.opacity = '100'}
        if (cardContainer) {cardContainer.style.transform = 'scale(1.1)'}
        
        const video = this.querySelector('video')
        video?.play()
    }

here is the the css on the card container:

    .card-container {
        position: relative;
        height: 262px;
        width: 210px;
        border-radius: 10px;
        cursor: pointer;
        transition: 
            height .2s ease-in,
            width .2s ease-in,
            transform .2s ease-in
        ;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    .card-container {
        position: relative;
        height: 262px;
        width: 210px;
        border-radius: 10px;
        cursor: pointer;
        transition: 
            height .2s ease-in,
            width .2s ease-in,
            transform .2s ease-in
        ;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

And here's my CSS on the track:

    .track {
        display: flex;
        gap: 1em;
        scroll-snap-type: x mandatory;
    }

    .track {
        display: flex;
        gap: 1em;
        scroll-snap-type: x mandatory;
    }

BrianCOP•14mo ago

My apologies for presenting that poorly before, the important sentence is: "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." Is display flex screwing things up?

BrianCOP•14mo ago

because I take it off of flex and I get this (with inline block cards):

BrianCOP•14mo ago

I have tried both transform: scale() and scale: value Also thank you for taking the time to read this and help me out!

BrianCOP•14mo ago

yeah, it looks like I just have to do height and width

MarkBoots•14mo ago

yep, just adjusting the width/height should work. if you use transform functions (such as scale) it will visualy change, but the actual size/position of the element stays the same, so surrounding content will not adjust.

snxxwyy•14mo ago

@BrianC i just whipped this up, does this help you? https://codepen.io/deerCabin/pen/OJrrEKG

CodePen

carousel-card-chooser-example

...

BrianCOP•14mo ago

Thanks snxxwyy! I looks great. The issue was maintaining the margins when scaling up the element. The trick in there was that they wanted to use baked in text in the cards, so that allows you to just do a basic height width adjustment, which works so long as you have object fit on there thank you for taking the time to look into it, and whip that up!

snxxwyy•14mo ago

no worries, glad it helped! @BrianC i edited it so the overlap and gap values are more maintainable, it doesn't have random numbers everywhere, all you have to do is edit the overlap variable and it automatically changes the gap size for you.

BrianCOP•14mo ago

I'm just off to a family get together, but I'm jazzed to have a closer look when I'm back!

snxxwyy•14mo ago

alrighty sounds good!

Gaming

Programming

How do I maintain space between sibling elements when scaling them up on mouse enter / hover ?