悬停按钮可将图像更改为灰度100％css

Question

我正在尝试将鼠标悬停在按钮上时使图像变为灰度100％。问题是它在悬停Button时不会变成灰度图像。我曾尝试使用:active,:hover，但它无法解决我的问题。

#image1:hover {
   filter: grayscale(100%);
}
.button1 {
  position: absolute;
  width: 500px;
  left:0;
  top: 180px;
  text-align: center;
  opacity: 0;
  transition: opacity .35s ease;
}
.button1 a {
  width: 200px;
  padding: 12px 48px;
  text-align: center;
  color: #ff991e;
  border: 1px solid #ff991e;
  z-index: 1;
  text-decoration: none;
  font-weight: bolder;
}

.image-1:hover .button1 {
  opacity: 1;
}

div.button1:hover > #image1 {
  filter: grayscale(100%);
}

<div class="col-md-6 image-1">
  <img src="http://servesphere.com.ph/moto/wp-content/uploads/2017/12/Left-image.png" class="" id="image1" style="width: auto; height: 320px;">
  <div class="centered">
    <p class="title1">BRAND NEW</p>
    <div class="button1"><a href="#"> ENTER </a></div>
  </div>
</div>

Answer 1

.button-div a {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 100px;
  padding: 12px 48px;
  color: #ff991e;
  border: 1px solid #ff991e;
  z-index: 1;
  text-decoration: none;
  font-weight: bolder;
  opacity: 0;
  text-align: center;
  transition: opacity .35s ease;
}

.button-div img {
  width: auto; 
  height: 320px;
  position: relative;
}

.button-div:hover a.button {
  opacity: 1;
}

.button-div a:hover + #image1 {
  filter: grayscale(100%);
}

<div class="col-md-6 image-1">
    <div class="button-div">
      <a class="button" href="#"> ENTER </a>
      <img src="http://servesphere.com.ph/moto/wp-content/uploads/2017/12/Left-image.png" class="" id="image1" style="">
    </div>
		
		<div class="centered">
			<p class="title1">BRAND NEW</p>	
		</div>
	</div>

检查一下。