Overlay text is blocking transition of background image

How can I stop an overlay text from blocking hover effect of a background image?

Hover effect works just fine
(https://i.stack.imgur.com/B5Rkb.jpg)

...As long as I don't hover exactly on the overlay text
(https://i.stack.imgur.com/AWFty.jpg)

This is my scss code:

.home__featured-element {
         width: 30%;
         height: 100%;
         position: relative;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;

                    transition: all 0.4s ease-in-out;
                    &:hover {
                        cursor: pointer;
                        filter: brightness(70%);
                    }
                }
                
                &::after {
                    content: "ADD TO CART";
                    position: absolute;
                    opacity: 0;
                    color: white;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }
                &:hover::after {
                    opacity: 1;
                }
            }

And this is my jsx code:

<div className="home__featured-products-wrapper">
            <div className="home__featured-element">
              <img src={items[0].imgSrc} />
              <div>{items[0].name}</div>
              <div>${items[0].price}</div>
            </div>
            <div className="home__featured-element">
              <img src={items[4].imgSrc} />
              <div>{items[4].name}</div>
              <div>${items[4].price}</div>
            </div>
            <div className="home__featured-element">
              <img src={items[2].imgSrc} />
              <div>{items[2].name}</div>
              <div>${items[2].price}</div>
            </div>
            <div className="home__featured-element">
              <img src={items[3].imgSrc} />
              <div>{items[3].name}</div>
              <div>${items[3].price}</div>
            </div>
</div>

You can put a pointer-events: none on the after pseudo element so the hover is 'seen' by the img.

Here's a simplified snippet using pure CSS/HTML to demonstrate.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<style>
  .home__featured-element {
    width: 30%;
    height: 100%;
    position: relative;
  }
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s ease-in-out;
  }
  
  img:hover {
    cursor: pointer;
    filter: brightness(70%);
  }
  
  .home__featured-element::after {
    content: "ADD TO CART";
    position: absolute;
    opacity: 0;
    color: white;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
  .home__featured-element:hover::after {
    opacity: 1;
    pointer-events: none;
  }
</style>
<div class="home__featured-products-wrapper">
  <div class="home__featured-element">
    <img src="https://picsum.photos/id/1016/300/300" />
    <div>name</div>
    <div>price</div>
  </div>
</div>

<!-- end snippet -->

Note: You may like to consider whether this way of showing the text works well in all circumstances- screen reader users may not get told about it for example.