Hola,
a ver si te sirve:
Como verás, lo que cambia es el alto del div con clase "cajaConTexto" (style="top: 180px;"). Dentro del contenedor puede ir cualquier cosa. En este caso, primero hay una imagen de fondo con posición absoluta y z-index:1. Luego por arriba va la cajaConTexto que dentro tiene el encabezado y el resto del texto
Código HTML :
<div class="contenedor"> <img border="0" alt="imagen" src="http://img510.imageshack.us/img510/2202/imagenyb.jpg">
<div class="cajaConTexto" style="top: 180px;">
<h2><a title="Título" href="#">Un encabezado con enlace</a></h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id eros eu lectus laoreet egestas in ac ipsum. Ut vitae libero magna, sit amet tristique lectus. </div>
</div>
</div>
Aquí hay varios estilos, pero lo que realmente importa son las posiciones de los elementos (position, z-index, top...)
Código :
.contenedor{
height: 250px;
overflow: hidden;
position: relative;
width: 215px
}
.contenedor img {
position: absolute;
z-index: 1
}
.contenedor .cajaConTexto {
background: url("http://img687.imageshack.us/img687/9873/bgtrasparente.png") repeat 0 0;
color: #fff;
height: 250px;
padding: 20px 10px;
position: absolute;
top: 180px;
width: 200px;
z-index: 2
}
.contenedor .cajaConTexto h2 {
font-family: 'Arial','Trebuchet MS';
font-size: 18px;
letter-spacing: -1px;
line-height: 23px;
margin: 0;
padding: 0 0 26px;
text-transform: uppercase;
}
.contenedor .cajaConTexto a {
color: #ff0;
text-decoration: none;
}
..contenedor .cajaConTexto div {font-size: 11px}
Aquí el script, que maneja el hover sobre todo el contenedor, pero eleva solo la cajaConTexto
Código Java :
$(function() {
$(".contenedor").hover(function(){
$(this).find(".cajaConTexto").stop().animate({
top:0
}, 150);
}, function(){
$(this).find(".cajaConTexto").stop().animate({
top:180
}, 150);
});
Eso sería todo, creo.
Saludos!
