How to properly use filter in FF?

Question

Mozilla Firefox

Friends, everything works in Chromule, but the Fire Fox refuses to eat (I won’t say anything about the brothers Donkey and Donkey at all :)).

.k { 
  background: url(../2.jpg) repeat scroll 0 0 / 100% 100% rgba(0, 0, 0, 0); 
  height: 100%;
  width: 50%;
  position: absolute;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  transition: 0.5s all;
}
.k:hover { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%);}

As you understand, I need to make a picture in black and white, and when hovering it in color, and not sharply, but smoothly.

Answer 1

Use svg filters
https://developer.mozilla.org/en-US/docs/Web/CSS/filter