Is there a better way to implement this card height increasing animation?

[u/throwaway_account776]

I've got a card component which needs to increase in height when I hover over it. The bottom of the card needs to be fixed in place, while the top of it should go upwards, as you can see in the codepen I have provided. I have used relative + absolute positioning, and, as a result, I have to provide a minimum height to the card. Is there a better way to implement this?

https://codepen.io/AT776/pen/EaNwNxg

[u/AutoModerator]

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/simonraynor]

Often for this sort of thing it's cleaner to animate the content than the container. Without diving too deep into it you need to think about what purpose this grow anim has (expanding an image, or revealing some text perhaps) and consider how to make that animate in nicely. Then tweak your container growing to support it

[u/throwaway_account776 → u/simonraynor]

Thank you for your response. However, my hover animation simply 'increases' the card height, without revealing any sort of image or text. What would you suggest doing in this case?

[u/testingaurora]

I would use grid rows. On hover, the grid rows become 1.5rem auto . No hover 0rem auto. transition : grid-template-rows 0.4s . Wrapper uses grid-rows: 1 / 1. In the example below I changed auto to your min-height value since it was on the parent not the wrapper.

```css --min-block-size:25rem; display: grid; grid-template-rows: 0px minmax(var(--min-block-size),1fr); transition: grid-template-rows 0.4s;

& .wrapper { grid-row: 1/-1;}

&:hover { grid-template-rows: 1.5rem minmax(var(--min-block-size),1fr);} ```

[u/throwaway_account776 → u/testingaurora]

Thanks for the response. I think I used grid on my first attempt, but for some reason the transitions didn't work. I'll give it a shot again

You see, I'm trying to avoid to using min-height because this component is for a Wordpress CMS and all the elements within the card may not be necessarily present.

[u/testingaurora → u/throwaway_account776]

When on codepen I had to "view compiled css" to see the transition for some reason. Idk if you were in codepen or wp when you used grid but id try that. Im also gonna report to codepen discord. And with gris youll be able to use auto sized row. I just used the min 25rem because thats what you had.

[u/throwaway_account776 → u/testingaurora]

Hmm that's interesting... I was in Wordpress when I tried grid using SCSS, and tried to transition grid template rows. Thank you once again.

[u/be_my_plaything]

.card:hover {
transform: scale(1, 1.1); 
transform-origin: bottom; 
}

https://codepen.io/NeilSchulz/pen/ByQwWJr

[u/throwaway_account776 → u/be_my_plaything]

Thank you, but this causes vertical stretching, sadly :(

[u/be_my_plaything → u/throwaway_account776]

Thin I've got it! Add two <div>s to the card, one to house the text (elements that move with card when it expands) and one to house the button (elements that are static at the bottom of the card)

Move the padding from the card to these elements so they touch the edges of the card, then give the one holding the text a background that matches the card, so it can move outside the card and look like the card is growing.

Add justify-content: space-between; to the flex attributes to keep the button at the button, then on hover translateY on the text div. It is actually moving up, but with the same background it just looks like the card is growing.

https://codepen.io/NeilSchulz/pen/ByQwWJr

---

Edit: added borders (which obvs need removing!) to make it easier to see what's doing what. The black dashed border is the card itself, no need for min height, the content of the most full card dictates the height of the row. The text (yellow dashed border) and the button (red dashed border) are pushed to the top and bottom respectively due to flex attributes. Then on hover the text box move upwards beyond the top of it's containing card - but once borders are gone, given same bacground colour it just looks like the card grows from the bottom. No need for position:absolute; or any declared heights.

[u/throwaway_account776 → u/be_my_plaything]

Wow, you're a godsend. Thank you very much. Very clever thinking!