Как обесцветить и насытить изображение с помощью CSS?

Обновить

Я только понял, что десатурация работает только в Chrome. Как заставить его работать в FF, IE и других браузерах? (Заголовок изменен)

Я преобразую цветную картинку в оттенки серого, следуя приведенным здесь предложениям: Преобразование изображения в оттенки серого в HTML/CSS

И он отлично работает (в Chrome): http://jsfiddle.net/7mNEC/

<img src="https://imagizer.imageshack.us/v2/350x496q90/822/z7ds.jpg" />

// CSSS
img {
    filter:         url(~"data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    filter: gray; 
}

img:hover {
    filter: none;
    cursor: pointer;
}

Но я не могу удалить десатурацию, например. мышь.

Любые идеи, что я делаю неправильно?

Ответы

Ответ 1

Вам просто нужно отменить оттенки серого для каждого свойства CSS префикса браузера:

img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
    cursor: pointer;
}

http://jsfiddle.net/7mNEC/1/

Ответ 2

Более прохладный, если вы добавите такой переход:

  img {
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    cursor: pointer;
    transition: all 300ms ease;
  }
  img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
  }