rollover de imagen por texto html

Hola,
me gustaria conseguir el efecto de rollover en imagenes que a su vez son links, pero que el rollover cambie de imagen a imagen de fondo y texto html por encima.
un efecto como el de este ejemplo: http://www.behance.com/Creative_Network

¿alguien sabe como se hace?
gracias!!

con css asi:
html:

Código HTML :

<ul >
<li class="plin">vinculo 1</li>
<li class="plon">vinculo 2</li>
<li class="plun">vinculo 3</li>
</ul>
<div id="cambia-imagen"></div>

css:

Código :

#cambia-imagen {
height:100px;
width:100px
}
.plin:hover #cambia-imagen {
background: url(url/imagen_plin.jpg) no-repeat
}
.plon:hover #cambia-imagen {
background: url(url/imagen_plon.jpg) no-repeat
}
.plun:hover #cambia-imagen {
background: url(url/imagen_plun.jpg) no-repeat
}

gracias,
pero lo que quiero es que sea la imagen de fondo y el texto en html por encima. es decir texto real, no imagen de texto.
Además este texto solo aparece cuando se hace rollover, sinó esta oculto..

basicamente lo mismo:
html:

Código HTML :

<div id="menu">
   <ul> 
   <li><a href="#">vinculo 1</a><div class="plin">texto plin plin plin plin</div></li> 
   <li><a href="#">vinculo 2</a><div class="plon">texto plon plon plon plon</div></li> 
   <li><a href="#">vinculo 3</a><div class="plun">texto plun plun plun plun</div></li> 
   </ul> 
</div>

css:

Código :

#menu {
position:relative;
height:200px;
width:200px
}
li {
   display:block;
}
li:hover div {
   display:block;   /*the magic!*/
}
li > div {
   display:none;
   position:absolute;
   bottom:0;
   width:200px
   height:100px
}
.plin {
background: url(url/imagen_plin.jpg) no-repeat
}
.plon {
background: url(url/imagen_plon.jpg) no-repeat
}
.plun {
background: url(url/imagen_plun.jpg) no-repeat
}

Muchas gracias, me ha costado un poco pillarlo pero ya lo tengo funcionando perfecto!!
GRACIAS!