I'm trying to make my image into grayscale 100% while hovering the button. The problem is it does not become greyscale image while hovering the Button. I have tried to use :active,:hover
but it doesn't solve my issue.
#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>