I can't add transition to the hover effect

Issue

I'm working with React and Tailwindcss. I have a card, a shadowed text on top of an image. Shadowed text has hover effect so it doesn't appear unless hovered. I wanted to make hover effect more smooth so I tried giving it transition but I just couldn't. Where exactly should I give transition class?

Here's my code:

<div className="group relative grid w-80 h-full flex-col items-end justify-center overflow-hidden rounded-4xl text-center">
              <div className="absolute h-full w-full overflow-hidden bg-cardBg bg-cover bg-center">
                <div className="hidden group-hover:block cursor-pointer w-full h-full to-bg-black-10 bg-gradient-to-t from-black/70 via-black/20"></div>
              </div>

              <div className="hidden group-hover:block cursor-pointer relative p-6 px-6">
                <h2 className="mb-6 block text-4xl font-medium leading-[1.5] tracking-normal text-white antialiased">
                  Shadowed Text Bla Bla Bla
                </h2>
              </div>
            </div>

I'm expecting a smooth effect on the hover.

Solution

Transitions cannot happen to between changes in display values. To have a fade, you could consider applying opacity: 0 instead of display: none and opacity: 1 instead of display: block by replacing hidden and group-hover:block with opacity-0 and group-hover:opacity-100. You'd also need to apply some sort of transition property, such as by using the transition class:

tailwind.config = {
  theme: {
    extend: {
      backgroundImage: {
        cardBg: 'url(https://picsum.photos/1000/1000)',
      },
    },
  },
};

<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div class="h-80">
  <div class="group relative grid w-80 h-full flex-col items-end justify-center overflow-hidden rounded-4xl text-center">
    <div class="absolute h-full w-full overflow-hidden bg-cardBg bg-cover bg-center">
      <div class="opacity-0 group-hover:opacity-100 cursor-pointer w-full h-full to-bg-black-10 bg-gradient-to-t from-black/70 via-black/20 transition"></div>
    </div>

    <div class="opacity-0 group-hover:opacity-100 cursor-pointer relative p-6 px-6 transition">
      <h2 class="mb-6 block text-4xl font-medium leading-[1.5] tracking-normal text-white antialiased">
        Shadowed Text Bla Bla Bla
      </h2>
    </div>
  </div>
</div>

Answered By - Wongjn