Оттенки серого с восстановлением цвета при наведении курсора мыши с помощью CSS

Достижение оттенка серого с восстановлением цвета при наведении курсора мыши возможно различными способами , обеспечивая кросс-браузерную совместимость как в IE, так и в Firefox.

Метод 1: чистый CSS (Использование одноцветного изображения)

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

img.grayscale {
  filter: url("data:image/svg xml;utf8, ..."); /* Firefox 3.5  */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19 , Safari 6  */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

Метод 2: чистый CSS (с использованием двух изображений)

Другой подход предполагает использование двух изображений: версии в оттенках серого и цветной версии. Первоначально отображается изображение в оттенках серого, а при наведении курсора мыши происходит переход к цветному изображению:

img {
  transition: all .6s ease;
}

img:hover {
  opacity: 0;
}

.grayscale {
  opacity: 1;
}

Метод 3: SVG с фильтрами CSS

Для IE10 и современных браузеров встроенный SVG может быть используется для применения фильтров, позволяющих динамически управлять эффектом оттенков серого:

svg image {
  transition: all .6s ease;
}

svg image:hover {
  opacity: 0;
}