00:00 So, on the DJI site, only the title shows, and then when you hover the card, of course, the width changes, but also the subtext, the paragraph, appears from the bottom. Everyone wishes that you could set a height of 0 to the paragraph text, and then on hover

00:18 change the height to auto, so you could animate from 0 to auto, but this is something that's currently not possible yet, but there are tricks around it, and I'm going to show you a pretty cool one. But let me quickly show you, if I set a height to 0, well, first of all, we have a problem, you can see the text is still showing.

00:37 So let's remove the empty 2 for now, and let's also add overflow hidden, so that the text is not showing. So it would be beautiful if we could animate this height of the paragraph from 0 to auto on hover. So we want this when we hover the card, not the paragraph itself.

00:56 So on the li item, the whole card, let's add a class of group, and then on group hover, we want to set the height to auto, and also add a transition all, in hope that this will transition the height from 0 to auto, but it will not.

01:16 Let's see what happens when we hover, it jumps abruptly like this, because browsers cannot animate from 0 to auto, but if we had a set height in pixels here, instead of auto, let's say we animate it to, hey, 100 pixels, look at what will happen now, aha, this is sort

01:35 of the effect we want, but we want the height to not be hardcoded to 100 pixels, we want it to be the height of the paragraph itself.