Как сделать изображения чёрно-белыми и обратно средствами jQuery и CSS?

Задача интересная, приступим к решению!

Делаем кроссбраузерное обесцвечивание элемента, неважно, изображения или блока, при наведении.

Код CSS

<style>    
.b_w {    
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg#greyscale); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
}    
</style>

Таким образом, у нас есть класс, который обесцвечивает элемент, то есть делает его чёрно-белым.

Внимание! Возможно, Вы уже увидели строчку с

filter:  url(grayscale.svg#greyscale);

В ней мы подключаем файл для того, чтобы обесцвечивание работало и в Firefox.

Достаточно просто создать файл grayscale.svg и добавить в него следующее:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="greyscale">
<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>

Готово! Теперь к коду JS.



Код JS (jQuery)

<script>
  $(document).ready(function(){

    $(".h").hover(
      function () {
        $(this).removeClass('b_w','slow');
      }, 
      function () {
        $(this).addClass('b_w','slow');
      }
    );

  });
</script>

В данном коде при загрузке документа мы обращаемся к элементам с классом h. Если на них наводится курсор, то мы удаляем класс с обесцвечиванием b_w и изображение становится цветным. Как только курсор отводится - класс добавляется вновь.

Код HTML

<img src="img/image001.png" class="h b_w">
<img src="img/image002.png" class="h b_w">
<div class="block1 h b_w"></div>