Currently we are animating to a fixed height of 100px on hover since browsers can't animate from 0 to `auto`:

```jsx
<p class="h-0 overflow-hidden text-white/70 transition-all group-hover:h-[100px]">
	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima quia ipsa
	eius.
</p>
```

Luckily there's a handy trick we can use to get around this limitation!

First, we'll remove the the `h-0` and `group-hover:h-[100px]` and `transition-all` classes from the paragraph as we won't need them anymore. Add the `mt-2` class back to the paragraph as well to help with spacing:

```jsx
<p class="mt-2 overflow-hidden text-white/70">
	Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima quia ipsa
	eius.
</p>
```

Now we'll wrap the paragraph with a `div` containing a class of `grid`, and set the grid row to `0fr`. Then we can then animate the grid row to `1fr` on hover and the `transition-all` class from the paragraph to the new `grid` div:

```jsx
<div class="grid grid-rows-[0fr] transition-all  group-hover:grid-rows-[1fr]">
	<p class="mt-2 overflow-hidden text-white/70">
		Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima quia ipsa
		eius.
	</p>
</div>
```

This will effectively animate the height of the paragraph from 0 to its full height when we hover over the card.

Using the fractional unit `fr` for the sizing is the trick that makes this work. It's a flexible unit of measurement for CSS Grid that distributes the available space evenly among the rows and columns.

In our case, setting the grid row to `0fr` will hide the paragraph since it's a zero height row. Then, when we hover over the card, we change the grid row to `1fr`, which will reveal the paragraph and have it take up all available space.

![Progress on card text display](https://res.cloudinary.com/epic-web/image/upload/v1705956555/8bfd5138be8957c071307ee4f532e0af.png)

We are almost finished with the text. The last thing we need to do with it is create a nice fade-in transition for some added polish.

Learn a CSS Grid technique to animate elements from zero to their full height on hover.

Use CSS Grid to Animate Elements with Dynamic Height

[00:00] And so here comes the cool trick, we're going to use CSS Grid to achieve this, and it's a pretty simple trick actually. We're going to use the <fr> unit, animate it from 0 <fr> to 1 <fr>. I will wrap

[00:14] my <p> tag in a <div> with a class of <grid>. Let's move the paragraph inside of it. And I'm going to get rid of the height of 0 and then 100 pixels on hover. So we're back to everything showing. And

[00:31] you know what? The spacing missing here is annoying me, so I'll add the empty 2 again, and we'll work that out later. Empty 2 here. So now we're going to make this grid row, we're going to make this 0 <fr> and then 1 <fr> on group hover. So on the parent grid here, we're going to set a

[00:49] custom grid rows, which is grid template rows, we're going to just have 0 <fr>. So it basically creates one row of 0 <fr>, which is going to be nothing. And now the text is gone and hidden.

[01:04] And here on group hover, we can change this to grid rows and 1 <fr>. So we're animating from 0 <fr> to 1 <fr> and I can move the transition-all class in this element. So let's take a look.

[01:21] That's a super handy trick. It works well and it's pretty easy to implement.

Tailwind CSS, Flexbox, and CSS Grid have made it easier than ever for you to implement responsive designs.

But what about when it comes to creating components that respond to user interactions?

There are so many things to consider: What should happen when a user hovers over an element? How should other components react? How can you make sure that your animations are smooth and fluid? How can you ensure text remains readable when it's overlaid on top of an image?

Animation and interactivity are key to creating engaging user experiences, but they can be intimidating.

Fortunately, the same tools that make it easy to create responsive designs also make it easy to create engaging interactions.

Inspired by a component found on when browsing [dji.com](http://dji.com/), Simon Vrachliotis has developed this tutorial to show you how to build a set of professional-grade cards for displaying content.

There are three main sections to this tutorial:

**Setting the Stage:** Create a plan by exploring the deployed card component's behavior. Dive into the starting code and prepare for the transformation.

**Cart Layout:** Use Flexbox and CSS Grid properties to create a responsive layout for the cards. Work with image and text placement within each card.

**Interaction Polish:** Add a subtle background overlay for better text readability. Create smooth hover animations for card expansion and text reveal effects.

There's more to this tutorial than just the code.

Along the way, Simon shares his thought process and design decisions behind each Tailwind class that gets added. You'll learn how to think like a UI designer and develop the intuition for making things look good.

**Key Takeaways:**

- Using Flexbox and CSS Grid for responsive layouts.
- Understanding the role of the fractional `fr` unit.
- Properly ordering elements to achieve a desired look.
- Configuring Tailwind CSS for animation and transition effects.
- Achieving full-coverage background images with proper aspect ratios.
- Ensuring text readability with background overlays.

### Ready to Elevate Your UI Skills?

Whether you're a beginner or an experienced developer, this tutorial has something for you.

It's time to elevate your Tailwind CSS skills and impress your users with engaging hover interactions.

Let's do this!

Simon Vrachliotis

Recreate an interactive cards UI with Tailwind CSS.

Fluid Hover Cards with Tailwind CSS

Understanding how to employ Flexbox for crafting fluid, horizontally adaptable UIs with reusable elements.

Overview of the Cards Grid

JavaScript's Array methods provide a quick way to create a list of items.

Use a Loop to Quickly Create a List

A step-by-step guide on how to fetch and display images dynamically in a gallery.

DynamicallyAdd Images to the Cards

Positioning and Styling Text in Cards

Adding a background gradient can enhance the readability of text laid over vibrant images.

Enhance Text Readability with a Gradient

By adding some classes to the cards, we can hide and reveal text on hover.

Hide and Reveal Text on Hover

Add an interactive hover effect that changes the opacity of text.

Animate Text Opacity

Update the effect so the hovered card expands and the other cards shrink using Flexbox.

Animate A Card's Width on Hover with Flexbox

Setting a fixed width for card text will prevent line break jumps when the card expands and contracts.

Prevent Line Break Jumps with Fixed Widths

This was an iterative process, but there are two main takeaways that you should keep in mind when working on your own projects.

Fluid Hover Cards with Tailwind CSS

Fluid Hover Cards with Tailwind CSS

Transcript

Use CSS Grid to Animate Elements with Dynamic Height

Transcript