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

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 >
                    <div >
                      <h2 >Title!</h2>
                      <p>We are using cookies for no reason.</p>
                      <div >
                        <button >Accept</button>
                        <button >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 >
                        <h5 >
                          Special title treatment
                        </h5>
                        <p >
                          With supporting text below as a natural lead-in to
                          additional content.
                        </p>
                        <button
                          type="button"
                          
                        >
                          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 >
                        <h5 >
                          Special title treatment
                        </h5>
                        <p >
                          With supporting text below as a natural lead-in to
                          additional content.
                        </p>
                        <button
                          type="button"
                          
                        >
                          Button
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </>
      );
    };
    
    export default HomeHero;

CodePudding user response：

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

CodePudding user response：

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.

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.
If it is a picture, this answer to the above question claims to fix the problem (though I have never tried this)
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.