Hover button to make image change to grayscale 100% css

Question

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>

Can you make the button a sibling of your image? Then you can use: `.button1:hover + #image1{ ... }` — Roland Starke, Dec 06 '17 at 11:55

Krzysztof Mazur · Accepted Answer · 2017-12-06T12:32:19.067

0

.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>

Check this out.

edited Dec 06 '17 at 12:32

answered Dec 06 '17 at 12:02

Krzysztof Mazur

568
2
13

hello thanks for answering once i hover my image the button will show up and once button shown up and hover it the image must be grayscle too – Sicario Dec 06 '17 at 12:08
But it does, maybe it's your browser problem? – Krzysztof Mazur Dec 06 '17 at 12:14
i dont know why, can you check my codes ? are you available for teamviewer ? – Sicario Dec 06 '17 at 12:21
First of all. tell me which browser are u using? And just for sure: user hover BUTTON, then BUTTONS shows up and IMAGE go greyscale. user leave BUTTON and BUTTON hides, IMAGE goes normal color, right? – Krzysztof Mazur Dec 06 '17 at 12:25
im using google chrome, hover image > show button > hover button > image must be grayscale, all grayscale are working but the only thing is when i hover button the image go to normal(without grayscale) – Sicario Dec 06 '17 at 12:28
Now I get it :) – Krzysztof Mazur Dec 06 '17 at 12:32
Please look at code snippet once more. – Krzysztof Mazur Dec 06 '17 at 12:40
Thanks! @Krzysztof Mazur you got it! – Sicario Dec 06 '17 at 12:41

Hover button to make image change to grayscale 100% css

1 Answers1