Cambiar efecto sobre imágen

[furoya]

¿Tiene que ser con javascript?

El efecto es muy simple, y se puede encarar de varias formas.
Una es meter la imagen en una caja (puede ser un span) que tenga fondo negro, y con CSS puro o asistido por JS se le baja la opacidad para que se transparente contra el negro. La ventaja de éste es que solamente se usa código y las imágenes.
Otra es usar más capas, una contenedora para cada imagen (como el caso anterior), adentro la imagen y otra imagen más por delante que es un*.png o *.gif negro semitransparente; lo que se hace es mostrar/ocultar esa imagen al pasar el puntero. Aunque en este caso, también se puede reemplazar el velado por una capa creada con HTML/CSS que tenga un color negro semitransparente, y nos ahorramos la segunda imagen. También la foto puede estar como fondo del contenedor, y nos ahorramos una capa.

En fin, hay muchas maneras de maquetarlo, y con :hover o mouseover; mouseout (aplicando el CSS vía javascript) hacés la animación.