Muchas gracias por vuestras respuestas, Bonez, C2am.
C2am : la animación que enlazaste es muy interesante, varias imagenes que se ven solo parcialmente, en diagonal, con desplazamiento lateral, queda muy espectacular. La pongo a la cola para aprender a hacerla, jaja. Gracias
Bonez : pongo aquí el código, muy buena idea, gracias.
Además como he visto que en algunos casos se ponen los resultados en alguna web que existen para eso, he aprendido a hacerlo y también lo pongo. Incluyendo el utilizar una imagen enlazada.
A ver si a partir del codigo de la cortina ascendente pudieraís ayudarme a saber cómo hacer cortinas descendentes, a la izquierda y hacia la derecha.
*
Efecto cortina ascendente
el css :
Código:
.recuadro {
position: relative;
width: 193px;
height: 260px;
overflow: hidden;
border: 1px solid #ccc;
}
.recuadro a {
text-decoration: none;
color: #000;
}
.imagen_recuadro, .detalles_recuadro {
padding: 10px;
height: 240px;
}
.imagen_recuadro {
margin-top: 0;
background: #000000;
-webkit-transition-property: margin-top;
-webkit-transition-duration: .9s;
-moz-transition-property: margin-top;
-moz-transition-duration: .9s;
-o-transition-property: margin-top;
-o-transition-duration: .9s;
-ms-transition-property: margin-top;
-ms-transition-duration: .9s;
}
.detalles_recuadro {
background: #EEEEEE;
color: #666666;
font-family: Arial;
font-size: 12px;
}
.recuadro:hover .imagen_recuadro {
margin-top: -260px;
}
el html :
Código:
<div class="recuadro">
<a href="pinguinos">
<div class="imagen_recuadro">
<img alt="MADRE_PINGUINO_Y_CRIA (54K)" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/MADRE_PINGUINO_Y_CRIA.jpg/433px-MADRE_PINGUINO_Y_CRIA.jpg" height="240" width="173" />
</div>
<div class="detalles_recuadro">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</a>
</div>
el resultado y también el código [URL="http://jsfiddle.net/LoboBlanco/qVSWQ/"]aqui[/URL]