Fare la transizione in javascript puro diventa un po' lungo e difficile...
Ti consiglio di usare un framework come MooTools o jQuery. Io uso il primo e bastano poche istruzioni per farlo.
Ovviamente devi prima preparare le due immagini.
Poi preparerei un <a> con dentro uno <span> e gli assegnerei un id per identificarli in modo univoco. Quindi gli do lo stile: stesse dimensioni e come sfondo dell'<a> la prima immagine (quella con la donna nell'esempio) e nello span l'immagine che comparirà al passaggio del mouse (quella con solo la scritta). Inoltre lo span lo metto invisibile così all'inizio non si vede.
codice:
<style type="text/css">
<!--
#img_sfondo, #img_hover {
display: block;
width: 200px;
height: 200px;
}
#img_sfondo {
background-image: url(img1.jpg);
}
#img_hover {
background-image: url(img2.jpg);
visibility: hidden;
}
-->
</style>
[...]
<a id="img_sfondo" href="#">
    <span id="img_hover"></span>
</a>
Ora comincio a creare lo script javascript con MooTools.
Se non ce l'hai già, scarica mootools 1.2 da http://mootools.net/download/version/1.2.5
è già uscita la versione 1.3, ma non l'ho ancora provata e a volte il codic