Image change (smoothly) on mouse hover from 1 to another?

Hi. I have a photography website hosted with wordpress and would like to do banners for my portfolio (currently there are some temporary ones) so that each category has am appropriate banner allocated to it.

How can I code a banner that shows one image but when I hover over it it slowly changes into the other (the darker version)? Thanks!