Apareceram aqui várias repostas enquanto eu estava a escrever a minha sugestão, mas decidi postar aqui na mesma outra maneira de como podes fazer o pretendido apenas usando CSS.
Exemplo no Jsfiddle: http://jsfiddle.net/pp02f40y/
.hoverInfo {
position: relative;
width: 400px;
cursor:pointer;
overflow: hidden;
font-family: sans-serif;
}
.imgInfo {
width: 400px;
}
.imgTextInfo {
position: absolute;
bottom: -30%;
width: 100%;
opacity: 0;
background: rgba(0, 0, 0, 0.8);
color: #fff;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hoverInfo:hover .imgTextInfo {
opacity: 1;
bottom:0;
}
.what {padding: 5px 20px; border-bottom: 1px solid #fff;}
.when {float: right;}
.description {padding: 5px 20px;}
p {font-size: 13px;}
<div class="hoverInfo">
<img class="imgInfo" src="http://i.imgur.com/fxGRWi0.jpg"/>
<div class="imgTextInfo">
<div class="what">
<span class="title">Rihanna stuff</span>
<span class="when">May 18, 2015</span>
</div>
<div class="description">
<p>Hi there! This is just a random description. Click here to read more.</p>
</div>
</div>
</div>
Sim, isto poderia ser feito com JQuery. Mas eu pessoalmente prefiro usar esta opção com CSS.
Eis um conselho, sempre que possas utilizar CSS em vez de JQuery ou javascript para fazer qualquer coisa, usa CSS. Eis o porquê:
Primeiro que tudo, usar CSS é muito mais eficiente.
Estás a usar um monte de interacções desnecessárias para fazer algo que podes fazer apenas com CSS. E usando JQuery vais também aumentar o tempo de processamento desta acção. Eis um exemplo:
O jQuery oferece uma série de métodos para aplicar estilos específicos, como por exemplo:
$("#meuElemento").css({
color: "#c00",
backgroundColor: "#eee",
width: "200px",
height: "100px",
borderColor: "#f00"
});
Usando puro JavaScript:
var m = document.getElementById("meuElemento"), c = m.style;
c.color = "#c00";
c.backgroundColor = "#eee";
c.width = "200px";
c.height = "100px";
c.borderColor = "#f00";
Mais de 10.000 iterações foram feitas usando selectores em cache, o código jQuery foi executado em 6,670ms, Enquanto o JavaScript Nativo levou 330ms - foi 20 vezes mais rápido. Usando CSS será mais rápido ainda, e é com certeza a melhor forma de o fazer a menos que algum valor precise de ser calculado por alguma razão.