Zmiana koloru obrazka po najechaniu myszką

Kilka sposobów, które mogą być przydatne:

1. CSS
Dodaj to do własnych styli:

.grayscale {
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
 -o-filter: grayscale(100%);
 filter: grayscale(100%);
 filter: url(grayscale.svg); /* Firefox 4+ */
 filter: gray; /* IE 6-9 */
transition:all 0.4s ease-in-out;
-webkit-transition:all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-ms-transition:all 0.4s ease-in-out;
-o-transition:all 0.4s ease-in-out;
}

.grayscale:hover {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none;
}

Plus w części html dodaj klasę do wstawianego obrazka:
<a href="#"><img class="grayscale" src="źródło zdjęcia"></a>

2. Skrypt jquery np ten:
http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/demo.html

3. Wtyczki do WP np takie:
http://wordpress.org/plugins/simple-image-manipulator/
http://wordpress.org/plugins/imagefx/