On hover the expanded part snapping back instead of staying that way, how do i fix this

7 Replies
Joao
Joao3y ago
The animation resets when done, you need to specify fill mode animation: lineInserted 0.4s ease-in-out forwards;
Aldrin
Aldrin3y ago
ok thanks it worked , now i have this issue, on hover the animation gets applied to all cards
MarkBoots
MarkBoots3y ago
it's not really applied to all cards, but because they are is inside a grid container, the height grows for all. add this rule to prevent it
.w-card:not(:hover){
align-self: start;
}
.w-card:not(:hover){
align-self: start;
}
Aldrin
Aldrin3y ago
it worked thanks 👍 this works fine but if i add a card below it, in the 2nd row it there , heigh of the 1st row expands https://codepen.io/aldrinbright/pen/PoeENbK
MarkBoots
MarkBoots3y ago
don't set grid-template-rows. now you are setting the rows to 1fr, so the rows will be the same height. if the second one grows,the first one will match that if you really want to have a set amount of rows, then make it grid-template-rows: repeat(4,auto) if you don't set it, new rows will be made automatically with height auto
Aldrin
Aldrin3y ago
it still grows
Want results from more Discord servers?
Add your server