Hola hace un tiempo hice algo parecido, salvo que la imagen se ve "original" y cuando "pasas el mouse" sobre la imagen se ponga en "blanco y negro" digamos escala de grises.
Pero lo hice con un style nuevo, por si te sirve de algo te muestro el style:
Código:
img {A:hover, A:active {color: #FFFFFF }}
A:hover img, A:active img {FILTER: "Gray";border:2px; border-thickness: 2px; border-color: #ffcc00; border-style: solid}
podes modificar los bordes, colores, etc.
fijate.. quizas modificando un poco ese style podes hacer lo que estas buscando.
Esto que te pase lo aplicaba sobre imagenes que tenian un enlace.
Por si no sabes el estilo lo tenes que poner asi:
Código:
<head>
<style>
img {A:hover, A:active {color: #FFFFFF }}
A:hover img, A:active img {FILTER: "Gray";border:2px; border-thickness: 2px; border-color: #ffcc00; border-style: solid}
</style>
</head>
Se puede poner de otra manera, pero creo que esta es la mas simple.
Espero que te sirva de algo.
Saludos
Ariel