So basically, we want that background gradient to reveal itself over a third of a second. Okay. How do we do that? Unfortunately, not as easy as you might think. So to demonstrate this, I've set up a new example here, and this is what you see in the HTML. Alright, so let's just see what happens if we begin by saying, alright, we'll start, I'm using Tailwind here, which is fine. We'll have a background gradient to the bottom, and we'll make it from, how about blue-300 to blue-800.

it provides a variable here, gradientColorStops. And that variable is then referenced where you start with from, which itself is a variable. Anyways, if you're curious how Tailwind does some of that stuff, it's pretty cool, I think. But now let's say when the user hovers over it, and by the way, at this point, this should now be text-white. Okay. So now when the user hovers over this little card here, we want to change it. So when you hover over me, we're going to go from, and we'll do it super different here, from red-300, and then hover to red-800. We'll keep the same values there.

I don't want to go back to Adrian and tell him it can't be done. So yeah, let's see what we can do here. I think we're going to have to step outside of Tailwind. So you would put this within your CSS file. I'm just going to do it directly here. Now to start, we will need to give this a generic name like card, and we'll add our styles here. Okay. So again, in an actual project, if I'm using Tailwind, I can use apply to still reach for these, but I don't have access to that here.

This section is now on a higher layer, so to speak, than the text itself. So why don't we do this? Let's wrap all of the text within it, within a div, and reformat. And then what I'm going to do is set the z-index higher here. But of course, to set a z-index, we also have to position it relative. Okay. So now I think this will solve the problem, and it does. But just to be super clear, why don't we also set a z-index here of 1? Okay. And that won't change anything here.