Button does not show when hovering

Question

I'm trying to create an effect where when hovering the image the button will show up yet nothing happens. I tried display block instead of inline-block I also tried simply naming the div i want to hover on : image:hover + .button yet still it doesn't work. Would appreciate your help!

The CSS :

.HeartAnimation {
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/66955/web_heart_animation.png');
  background-repeat: no-repeat;
  background-size: 2900%;
  background-position: left;
  height: 60px;
  width: 70px;
  margin: 10px -10px auto;
  cursor: pointer;
}

.animate {
  animation: heart-burst 1s steps(28) forwards;
}

@keyframes heart-burst {
  0% {
    background-position: left;
  }
  100% {
    background-position: right;
  }
}

.button {
  display: none;
}

.container {
  position: relative;

  .image:hover + .button,
  .button:hover {
    display: inline-block;
    max-width: 400px;
    max-height: 400px;
  }
}

The JSX :

        <div className='container'>
          <img alt='person ' className='image' src={people.picture.large}></img>
          <button className='like-btn' onClick={() => setAddFavorite(people)}>
            {people.isLiked && <div className='HeartAnimation animate'></div>}
            <div className='button'>{!people.isLiked && <div className='HeartAnimation'></div>}</div>
          </button>
        </div>

Answer 1

first of all make sure your people.isLiked property work currectly if it is just delete "+" and you have a duplicated button class erase one of them i hope it work