javascript - 图片在响应时从 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="">