considerando che le due immagini differiscono per qualcosa che non puo' essere animato progressivamente via codice e che qualsiasi swap istantaneo non produrrebbe un bel risultato, la soluzione piu' semplice e' avere le due immagini una sopra l' altra, con lo stato normale a coprire quello hover
al passaggio puoi sfumare lo stato normale (jquery fadeIn/out) per mostrare progressivamente l' hover gia' presente sotto

a parte lo script, che e' appunto abbastanza elementare, sei in grado da sola di sistemare il markup/css per posizionare le immagini una sull' altra?