Lo strumento di base è il jquery che ho usato per intercettare il mousehover e mouseout.

Al verificarsi dell'evento faccio scorrere sull'oggetto due div semitrasparenti allineati uno in alto ed uno in basso all'oggetto.

usanto l'animazione li espando o contraggo verso il lato opposto. Essendo che sono semitrasparenti e che si incontrano a metà durante l'animazione, danno questo effetto particolare.

Questo è il "trucco" di base... poi se ti servono dettagli fammi sapere.

Ciao

Prima di tutto devi mettere i riferimenti a jquery e jqueryeasing, trovi tutta la documentazione googlando.

Poi nel document ready bindi gli eventi ed animi i tuoi div semitrasparenti

    $("TuoElemento").bind('mouseenter', function() {
        $("TendinaUp").animate({ 'height': 0 }, { "duration": 300, "easing": "easeOutCubic" });
        $("TendinaDown").animate({ 'height': 0, 'margin-top': 57 }, { "duration": 300, "easing": "easeOutCubic" });
    }).bind('mouseleave', function() {
        $("TendinaUp").animate({ 'height': 57 }, { "duration": 300, "easing": "easeOutCubic" });
        $("TendinaDown").animate({ 'height': 57, 'margin-top': 0 }, { "duration": 300, "easing": "easeOutCubic" });
    });

Tutto il resto lo fai con HTML

  <div id="TuoElemento" class="Dn_NewsClosed">
    <div> Il tuo contenuto </div>
    <div id="TendinaUp" class="Dn_TdnTop"></div>
    <div id="TendinaDown" class="Dn_TdnDown">
  </div>

E CSS

.Dn_NewsClosed {position:relative;width:245px;height:57px;margin:0 0 3px 0;cursor:pointer;
                overflow:hidden;}
.Dn_TdnTop {position:absolute;width:245px;height:57px;margin:0;top:0;left:0;background-color:#000000;opacity:0.4;filter:alpha(opacity=40)}
.Dn_TdnDown {position:absolute;width:245px;height:57px;margin:0;top:0;left:0;background-color:#000000;opacity:0.4;filter:alpha(opacity=40)}

Ovviamente questo è per darti un'idea poi ognuno se lo personalizza a piacimento.

Ciao