Current section: Implementation 12 exercises

Animate Text Opacity

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:

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

Loading lesson


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]