CSS filter Gray is not happen in the image hover

Question

Using css i try to convert image from colour to black and White. But its not happen in the top of the another div.

My code shown below

.home-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #fff;
}

.home-center-text {
  position: absolute;
  width: 100%;
  z-index: 1;
}

.home-center img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

.home-center img:hover {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  filter: none;
}

<div class="col-xs-12 col-sm-6">
  <div class="home-center">
    <div class="home-center-text">
      <h2>our film</h2>
      <span>See our work</span>
    </div>
    <img src="http://reussis.com/demo/studio/images/Home_Our_Film.jpg" class="img-responsive">

  </div>
</div>

Sample test link https://jsfiddle.net/rijo/29eo2kkL/1/

FF v54. I see gray image and on hover it's colored. What is wrong than? — Justinas, Jul 13 '17 at 06:13
If u hover in the text div it wont't work why? how to solve that — Rijo, Jul 13 '17 at 06:14

score 4 · Accepted Answer · answered Jul 13 '17 at 06:14

Apply :hover not to image, but to wrapper:

.home-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #fff;
}

.home-center-text {
  position: absolute;
  width: 100%;
  z-index: 1;
}

.home-center img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

.home-center:hover img {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  filter: none;
}

<div class="col-xs-12 col-sm-6">
  <div class="home-center">
    <div class="home-center-text">
      <h2>our film</h2>
      <span>See our work</span>
    </div>
    <img src="http://reussis.com/demo/studio/images/Home_Our_Film.jpg" class="img-responsive">

  </div>
</div>

Can you explain why this happens? It should work on img too, right? Or is it about the display property? — Abhimanyu, May 13 '22 at 20:50

Ehsan · Answer 2 · 2017-07-13T06:24:01.407

Use :hover on wrapper no img :

.home-center:hover img{
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  filter: none;
}

.home-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #fff;
}

.home-center-text {
  position: absolute;
  width: 100%;
  z-index: 1;
}

.home-center img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

.home-center:hover img{
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  filter: none;
}

<div class="col-xs-12 col-sm-6">
  <div class="home-center">
    <div class="home-center-text">
      <h2>our film</h2>
      <span>See our work</span>
    </div>
    <img src="http://reussis.com/demo/studio/images/Home_Our_Film.jpg" class="img-responsive">

  </div>
</div>

score 0 · Answer 3 · answered Jul 13 '17 at 06:18

You can trigger effects on another element based on hover of another element. Like this.

.home-center-text:hover ~ .home-center-img 
{  /* Do stuff here */ }

.home-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #fff;
}

.home-center-text {
  position: absolute;
  width: 100%;
  z-index: 1;
}

.home-center-img {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}

.home-center-img:hover {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  filter: none;
}

.home-center-text:hover ~ .home-center-img {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  filter: none;
}

<div class="col-xs-12 col-sm-6">
  <div class="home-center">
    <div class="home-center-text">
      <h2>our film</h2>
      <span>See our work</span>
    </div>
    <img src="http://reussis.com/demo/studio/images/Home_Our_Film.jpg" class="img-responsive home-center-img">

  </div>
</div>

Based on this answer.

CSS filter Gray is not happen in the image hover

3 Answers3