Pictures fade from BW to color while responsive

Question

What I want to do is to create a menu with 3 pictures (side-by-side):

I want each picture to become colored when hovering.

The problem here is that the pictures should resize matching the window size (responsive for Tablets and Phones).

I can't seem to get it to work as the pictures have a space in between and they won't fit the window's size: 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

You don't actually need JS or extra images for that.

CSS can do it all.

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="">