html - 图像悬停时不会发生 CSS 过滤器灰色

Question

我尝试使用 css 将 image 从彩色转换为黑白。但它不会发生在另一个 div 的顶部。

我的代码如下所示

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

示例测试链接https://jsfiddle.net/rijo/29eo2kkL/1/

Answer 1

应用 :hover 不是图像，而是包装器:

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