Concluding the Fluid Hover Cards Tutorial
We've successfully recreated the fluid hover effect of the DJI.com cards UI with Tailwind CSS!
This was an iterative process, but there are two main takeaways that you should keep in mind when working on your own projects.
When it comes to height, with CSS Grid and the
fr fractional units you ca
00:00 And I think that's it for this video. The two main takeaways here is that you can animate a height from zero to auto, or from no space to the amount of space that is required by using CSS grids and grids templates rows fraction units.
00:15 And then to achieve this fluid width share, you can use Flexbox flex grow property and animate it from one to one point something. And this will take the something away from the other cars, which is pretty cool. All right, hope you enjoyed that.