响应时图片从BW褪色为彩色

Question

我想做的是创建一个包含3张图片的菜单(并排)：

​

我希望每一张图片在悬停时都变成彩色的。

这里的问题是，图片的大小应该与窗口大小相匹配(适用于平板电脑和手机)。

我似乎不能让它工作，因为图片之间有一个空间，它们不适合窗口的大小：https://jsfiddle.net/EgDqy/68/embedded/result/

​

$(".cell").hover(
  function() {
    $(this).find('.fader').fadeOut("slow");
  },
  function() {
    $(this).find('.fader').fadeIn("slow");
  }
);

.cell {
  height: 100%;
  width: 100%;
  display: inline-block;
  position: relative;
}
.cell img {
  height: 100hv;
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="cell">
  <img src="http://www.benfica-zurique.ch/test/images/Fussball.jpg" alt="" display />
  <img src="http://www.benfica-zurique.ch/test/images/FussballBW.jpg" class="fader" alt="" />
</div>
<div class="cell">
  <img src="http://www.benfica-zurique.ch/test/images/Restaurant.jpg" alt="" />
  <img src="http://www.benfica-zurique.ch/test/images/RestaurantBW.jpg" class="fader" alt="" />
</div>
<div class="cell">
  <img src="http://www.benfica-zurique.ch/test/images/Zumba.jpg" alt="" />
  <img src="http://www.benfica-zurique.ch/test/images/ZumbaBW.jpg" class="fader" alt="" />
</div>

​

Answer 1

实际上，您不需要JS或额外的图像。

CSS可以做所有的事情。

​

img {
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
  filter: grayscale(1);
  transition: -webkit-filter 1s ease;   /* just for reference - add your owne prefixes */
}
img:hover {
  -webkit-filter: grayscale(0);
  -moz-filter: grayscale(0);
  filter: grayscale(0);
}

<img src="http://lorempixel.com/output/city-q-c-640-480-10.jpg" alt="">

​