响应时，图片从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可以做到这一切。

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;