Slick CSS3 Animated Image Caption, fue un experimento más de CSS3 y un poco de HTML5 usando la propiedad transition de CSS3. Su uso es sencillo en este ejemplo solo se necesita poner la imagen y el título dentro de un DIV:

El Html :

<div class="wrap">
    <img src="Tu imagen" alt="imagen" />
    <article class="text"><!-- HTML5-->
        <h2><a href="#">Texto para la Animación</a></h2>
    </article><!-- texto -->
</div><!-- Contenedor -->

y aquí la magia del CSS3:

.wrap{
height:200px;width:400px;
background:#000;
overflow:hidden;
position:relative;
}
.text{
background:rgba(0,0,0,0.5);
top:-70px;
color:white;
font:14px Georgia,serif;
height:auto;width:inherit;
position:absolute;

/* Magia de la trancisión con CSS3 */
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.text a{
color:#fff;
display:block;
padding:15px;
text-decoration:none;
/* CSS3 Transition Magic */
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .5s ease-out;
transition: all .4s ease-out;
}
.text a:hover{
color:red;
text-decoration:none;
}
.container:hover .text{
top:0;
}

Link | Slick CSS3 Animated Image Caption

Demo | Slick CSS3 Animated Image Caption Demo