Делаем цветное изображение черно-белым с помощью CSS Filters

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

.filter{
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  -o-filter:grayscale(100%);
  filter:grayscale(100%);
  -webkit-transition:1s;
  -moz-transition:1s;
  -o-transition:1s;
  transition:1s;
}

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

Простой пример, как цветное изображение сделать белым при наведении на него, в моем случае, нужно было темно-зеленое лого сделать белым, при наведении:

.site-logo a img{
    transition: .4s;
}

.site-logo a:hover img{
    filter: brightness(0%) invert(100%);
}

Больше информации здесь:

• http://habrahabr.ru/post/144852/