Ah I found one solution.

&__image {
    display:grid
    &:hover {
        transition: 1s;
        transform: scale(1.05);
       .button {
               opacity: 1;
            }
    }
}

&__button {
    opacity: 0;
    display: grid;
}

And then in js: className=”item__music button item__button”

If this is the layout of your HTML

<div class="item">
  <div class="__image" style="height:200px;width: 200px;background-color:red;margin:20px"></div>
  <div class="__button" style="height:200px;width: 200px;background-color:red;margin:20px"></div>
</div>

Then this style should do it:

.item {
  .__image {
    display: grid;
    &:hover {
      cursor: pointer;
      transition: 1s;
      transform: scale(1.05);
      + .__button {
        opacity: 1;
      }
    }
  }

  .__button {
    opacity: 0;
    display: grid;
    &:hover {
      opacity: 1;
    }
  }
}

I want to display the __button when I hover over the __image. But right now, the button has its own hover. It should do this: when the hover from __image is triggered, raise opacity of __button to visible.

Thanks for any help!

&__image {
    display:grid
    &:hover {
        transition: 1s;
        transform: scale(1.05);
    }
}

&__button {
    opacity: 0;
    display: grid;
    &:hover {
        opacity: 1;
    }
}