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
- come sfondo dell'<a> la prima immagine (quella con la donna nell'esempio)
- come sfondo dello span l'immagine che comparirà al passaggio del mouse (quella con solo la scritta)
- 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 codice è diverso, quindi potrebbe non funzionare.
Includo la libreria (per questo ti basta MooTools Core) e creo lo script vero e proprio.
codice:
<script type="text/javascript" src="mootools-1.2.5-core-yc.js"></script>
<script type="text/javascript">
<!--
window.addEvent('domready', function() {
  /*
  Mettere il codice qua dentro fa si che venga eseguito solo quando tutto il codice della pagina
  è stato caricato dal browser e quindi hai tutti gli elementi del DOM a disposizione.
  la funzione $() ti restituisce l'elemento in base all'id che gli passi come parametro.
  la funzione fade() gestisce l'opacità dell'elemento.
  */

  $('img_hover').fade('hide'); // imposto l'opacità a 0 
  $('img_sfondo').addEvent('mouseover', function() {
    $('img_hover').fade('in'); // al passaggio del mouse mostro lo span (e quindi il suo sfondo)
  });
  $('img_sfondo').addEvent('mouseout', function() {
    $('img_hover').fade('out'); // quando il mouse se ne va nascondo lo span
  });
});
-->
</script>
Il codice così com'è dovrebbe funzionare. è chiaro che prima di tutto dovresti capire come funziona il framework, come lavora questo script (un po' ho provato a spiegartelo nei commenti) e poi adattarlo alle tue necessità.