Un effetto di quel tipo si puo` ottenere inserendo due <div> uguali in posizione assoluta all'interno di un div contenitore (con posizionamento relativo).
Poi all'hover cambia la visibilita` dei due div interni.
Qualcosa del tipo:
codice:
HTML:
<div class="contenitore">
<div class="riposo">
... contenuto a riposo ...
</div>
<div class="conhover"">
... contenuto che si vuole all'hover ...
</div>
</div>
CSS:
.contenitore {
...
position: relative;
width: ...;
height: ...;
}
.riposo {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
display: block;
}
.conhover {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
display: none;
}
.riposo:hover {
display: none;
}
.conhover:hover {
display: block;
}
A questo poi puoi associare gli effetti di transizione (ma solo dopo che senza funziona)