Estaba aburrido y me tomé el trabajo de hacerte un ejemplo:
Opción CSS+jQuery
Código HTML:
Ver original<!DOCTYPE html>
<!--
.caja-info-wrap{
/* Floto las cajas contenedoras
les doy dimensiones fijas
oculto el desbordamiento
les doy posicionamiento relativo*/
float: left;
width: 300px;
height: 300px;
overflow: hidden;
position: relative;
}
.caja-info-wrap img{
/* aplicio posicionamiento relativo a las img
para que sean elementos de bloque y además
para poder ubicarlas debajo de la caja de
texto con z-index */
position: relative;
z-index: 10;
}
.caja-info-wrap p{
/* Estilo de la caja deslizante*/
position: absolute; /* posición absoluta */
left: 0; /* pegada a la izquierda */
right: 0; /* pegada a la derecha */
bottom: 0; /* pegada al fondo */
padding: 15px; /* espaciado */
margin: 0; /* sin margen */
z-index: 20; /* z index superior a la img para estar encima */
background: #000000; /* fondo sólido para navegadores que no soportan rgba() */
background: rgba(0,0,0,0.7); /* fondo semitransparente */
color:#FFFFFF;
font-size: 20px;
}
.js .caja-info-wrap p{
/* si el body tiene la clase JS, significa
que tenemos javascript y podemos ocultar el texto
hacia abajo para mostrarlo con javascript */
bottom: -100%;
}
-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){
//indicamos que js está activo
$('body').addClass('js');
// config
var s_velocidad = 200;
var s_easing = 'swing';
//obtenemos las cajas contenedoras
var $cajas = $('.caja-info-wrap');
//asignamos los eventos
$cajas
.mouseenter(function(){
$elemP = $(this).find('p');
// al entrar el mouse, animar a bottom:0
$elemP.animate({
bottom : 0
},s_velocidad,s_easing);
})
.mouseleave(function(){
$elemP = $(this).find('p');
// al sacar el mouse, animar a bottom:-100%
$elemP.animate({
bottom : -1*($elemP.outerHeight())
},s_velocidad,s_easing);
});
});
<div class="caja-info-wrap"> <img src="http://placekitten.com/300/300" alt="Gatito" /> <p>Lorem ipsum dolor sit amet, ephesiorum quod
</p> <div class="caja-info-wrap"> <img src="http://placebear.com/300/300" alt="Osito" /> <p>Testare in modo invenit iuvenem patre nihil labore in lucem concitaverunt in.
</p>
Está todo comentado para que entiendas qué hace cada cosa, creo que está bastante claro.
Dado que estamos en el foro de CSS:
Opción CSS pura (se cambió un
poquitito el CSS y se quitó todo el JS):
Código HTML:
Ver original<!DOCTYPE html>
<!--
.caja-info-wrap{
/* Floto las cajas contenedoras
les doy dimensiones fijas
oculto el desbordamiento
les doy posicionamiento relativo*/
float: left;
width: 300px;
height: 300px;
overflow: hidden;
position: relative;
}
.caja-info-wrap img{
/* aplicio posicionamiento relativo a las img
para que sean elementos de bloque y además
para poder ubicarlas debajo de la caja de
texto con z-index */
position: relative;
z-index: 10;
}
.caja-info-wrap p{
/* Estilo de la caja deslizante*/
position: absolute; /* posición absoluta */
left: 0; /* pegada a la izquierda */
right: 0; /* pegada a la derecha */
bottom: -100%; /* debajo del fondo */
padding: 15px; /* espaciado */
margin: 0; /* sin margen */
z-index: 20; /* z index superior a la img para estar encima */
background: #000000; /* fondo sólido para navegadores que no soportan rgba() */
background: rgba(0,0,0,0.7); /* fondo semitransparente */
color:#FFFFFF;
font-size: 20px;
/* transiciones para animar */
-webkit-transition: bottom 0.3s linear;
-moz-transition: bottom 0.3s linear;
-o-transition: bottom 0.3s linear;
transition: bottom 0.3s linear;
}
.caja-info-wrap:hover p{
/* al hacer hover sobre la caja
elevamos el texto */
bottom: 0;
}
-->
<div class="caja-info-wrap"> <img src="http://placekitten.com/300/300" alt="Gatito" /> <p>Lorem ipsum dolor sit amet, ephesiorum quod
</p> <div class="caja-info-wrap"> <img src="http://placebear.com/300/300" alt="Osito" /> <p>Testare in modo invenit iuvenem patre nihil labore in lucem concitaverunt in.
</p>