<div class="conteneur">
(on peut mettre une image, ou du texte)
<div class="info">Un bloc qui se met par dessus</div>
</div>

/* Le bloc conteneur */
.conteneur {
   background:red;
   position:relative;
   width:250px; /* on fixe la largeur */
   height:250px; /* et la hauteur */
   overflow:hidden; /* Tout ce qui dépasse est caché ! */
}

/* le bloc info */
.info {
   /* positionnement absolu par rapport au conteneur (qui est en relatif) */
   position:absolute;
   bottom:0; /* 0px par rapport au BAS du conteneur */
   left:0; /* 0px par rapport à la gauche du conteneur */
   
   height:250px; /* on fixe la hauteur, par exemple la même chose que notre conteneur (on peut mettre moins)
   width:100%;  /* on fixe la largeur, là j'ai mis "tout l'espace disponible", donc 100% */
   
   margin-bottom:-250px; /* on décale le bloc de 250px vers le bas, comme il "sort" des dimensions du conteneur, il disparait à cause du overflow hidden */
   
   /* on indique la propriété qui nécessitera une transition et le temps de transition pour tous les navigateurs */
   transition:margin 800ms ease;
   -moz-transition:margin 800ms ease;
   -o-transition:margin 800ms ease;
   -htm-transition:margin 800ms ease;
   -webkit-transition:margin 800ms ease;
   
   /* couleur de fond pour la démo */
   background:yellow;
}

/* lorsqu'on survole le conteneur (:hover), le bloc .info change */
.conteneur:hover .info {
   margin:0; /* la marge passe à 0, et le bloc réapparait ! Comme il était en bas, il donne l'impression de monter */
}