HTML

<div class="element"> 
 <div class="img"><img src="https://lh6.googleusercontent.com/-_l3PR-U8_FY/VOcpWz4-QpI/AAAAAAABc0M/wco-gPSSM0s/w223-h300-no/2-223x300%2B%281%29.gif" alt="" /></div> 
 <div class="description"> 
 <p>"&iquest;Los l&iacute;mites existen? &lsquo;Oh no, esos son creaciones modernas de tu sociedad, en el idioma universal no existe la expresi&oacute;n l&iacute;mite, s&oacute;lo existe la manifestaci&oacute;n de la expresi&oacute;n de la infinidad", respuesta del Maestro Malatai a esta pregunta</p> 
 </div> 
 </div> 

CSS

.element {
border: 2px dotted #330e02;
 border-radius: 5%/10%;
background: #fff;
float: left;
height: 320px;
margin-right: 10px;
overflow: hidden;
position: relative;
width: 417px;
}

.element a {
text-decoration: none;
color: #000;
}

.img, .description {
height: 300px;
}

.img {
margin-top: 0;
background: #fff;
-webkit-transition-property: margin-top;
-webkit-transition-duration: .5s;

-moz-transition-property: margin-top;
-moz-transition-duration: .5s;

-o-transition-property: margin-top;
-o-transition-duration: .5s;

-ms-transition-property: margin-top;
-ms-transition-duration: .5s;

}

.element:hover .img {
margin-top: -120px;
}

.description {
background: #fdf8d2;
color: #000;
font-family: Edwardian Script ITC;
font-size: 22px;
}


.description p {
padding:0 0 0 5px;
}