Tailwind CSS group-hover - different opacities on nested layers not working

Question

I'm running in to an issue when trying to get different layers to fade different opacities. I've got the card element (in the code below) that I want to keep at the background opacity of 50, and make the text opacity 100 on hover.

Right now when hovering over the card everything stays at at opacity-50 and I can't get the text to change to opacity-100. I tried setting the card title opacity to 100, but it seems like the parent container is overriding the child opacity.

Any suggestions as to how to fix this?

    import React from "react";
    import greenBlock from "../assets/images/homeLayout/heroPhotos/1.jpg";
    import yellowBlock from "../assets/images/homeLayout/heroPhotos/2.jpg";
    import redBlock from "../assets/images/homeLayout/heroPhotos/8.jpg";
    
    const HomeHero = () => {
      return (
        <>
          <div className="grid w-full h-screen grid-cols-1 lg:grid-cols-3">
            <div className="group">
              <div
                className="flex items-center justify-center order-1 object-cover w-full h-screen text-black transition duration-500 ease-in-out bg-cover saturate-100 group-hover:saturate-50"
                style={{ backgroundImage: `url(${greenBlock})` }}
              >
                <div className="flex justify-center transition duration-500 ease-in-out opacity-0 group-hover:opacity-100">
                  <div class="card w-96 bg-neutral text-neutral-content opacity-50">
                    <div class="card-body items-center text-center opacity-100">
                      <h2 class="card-title opacity-100">Title!</h2>
                      <p>We are using cookies for no reason.</p>
                      <div class="justify-end card-actions">
                        <button class="btn btn-primary">Accept</button>
                        <button class="btn btn-ghost">Deny</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
    
            <div className="group">
              <div
                className="flex items-center justify-center order-1 object-cover w-full h-screen text-black transition duration-500 ease-in-out bg-cover saturate-100 group-hover:saturate-50"
                style={{ backgroundImage: `url(${yellowBlock})` }}
              >
                <div className="flex justify-center transition duration-500 ease-in-out opacity-0 group-hover:opacity-100">
                  <div className="block max-w-sm text-center bg-white rounded-lg shadow-lg ">
                    <div className="px-6 py-3 border border-gray-300 rounded-lg">
                      <div class="p-6">
                        <h5 class="text-gray-900 text-xl font-medium mb-2">
                          Special title treatment
                        </h5>
                        <p class="text-gray-700 text-base mb-4">
                          With supporting text below as a natural lead-in to
                          additional content.
                        </p>
                        <button
                          type="button"
                          class=" inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
                        >
                          Button
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="group">
              <div
                className="flex items-center justify-center order-1 object-cover w-full h-screen text-black transition duration-500 ease-in-out bg-cover saturate-100 group-hover:saturate-50"
                style={{ backgroundImage: `url(${redBlock})` }}
              >
                <div className="flex justify-center transition duration-500 ease-in-out opacity-0 group-hover:opacity-100">
                  <div className="block max-w-sm text-center bg-white rounded-lg shadow-lg ">
                    <div className="px-6 py-3 border border-gray-300 rounded-lg">
                      <div class="p-6">
                        <h5 class="text-gray-900 text-xl font-medium mb-2">
                          Special title treatment
                        </h5>
                        <p class="text-gray-700 text-base mb-4">
                          With supporting text below as a natural lead-in to
                          additional content.
                        </p>
                        <button
                          type="button"
                          class=" inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
                        >
                          Button
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </>
      );
    };
    
    export default HomeHero;

Answer 1

In CSS changing the opacity of a parent element will do the same to all children. You want to change the opacity of the background color (or something similar).

TailwindCSS docs link for this

Answer 2

Opacity is inherited from parent to child elements, but luckily there are a couple of ways to get around this. A lot of those ways are in the answers to this similar question.

1. If it is a color, then the best way is to define the color with RGBA, where the last alpha channel is the opacity. This will not cascade.

2. If it is a picture, this answer to the above question claims to fix the problem (though I have never tried this)

3. If it is text or anything else, I tend to go with this solution of changing the child element to a sibling element and setting its position so that it is in the correct place.