Sobreposição gradativa de imagem

Olá galera.

tenho uma dúvida, talvez ela seja simples, mas estou com dificuldades para resolver....

tem algumas imagens que serão aplicadas em um menu. simulando que ela fique ativa (trocando pela imagem mais clara) quando o mouse passar por cima, até ai está tudo bem. Mas a troca de imagem está acontecendo de maneira repentina, ai vem a dúvida...

Tem alguma maneira dessa mudança de imagem seja gradativa, uma transição suave, onde fosse diminuindo a opacidade da primeira imagem e aumentando o da segunda?

Obs.: Usando JavaScript e CSS