Let's create a fade in effect for our text that starts at 0% opacity then transitions to 100% opacity on hover.

On the paragraph, add the `opacity-0`, `group-hover:opacity-100`, and `transition` classes:

```jsx
<p class="mt-2 overflow-hidden text-white/70 opacity-0 transition group-hover:opacity-100">
```

![The transition effect has been added](https://res.cloudinary.com/epic-web/image/upload/v1705956576/aedf9ff5b1cbc0c8d063bb37cf9f632f.png)

With these classes the transition happens very quickly.

In order to slow it down, we can add the `duration-300` class to set it to 300ms:

```jsx
<p class="mt-2 overflow-hidden text-white/70 opacity-0 transition duration-300 group-hover:opacity-100">
```

Now that the text is polished up, let's work on animating the background width!

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

Animate Text Opacity

[00:00] Let's also make the text here fade in in Opacity, start at 0% Opacity, and then transition to 100% Opacity. So Opacity 0, and then group hover Opacity 100,

[00:17] and we'll also add a transition here. This can be the default one that includes Opacity. And I can't really see it, so I will slow it right down. To 1000, which is 1 second, just to validate that it works. Yeah, okay, it's working.

[00:37] So let's maybe have a duration of 300, and yeah, I think that works better. [BLANK_AUDIO]

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

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

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

Animate Text Opacity

Transcript