Pues para la cortina hacia la derecha no lo consigo.
He "flotado" la imagen a la derecha y el texto a la izquierda.
Y logicamente he puesto que al poner encima el cursor del raton (hoover) el left-margin pase a un numero positivo, para que se desplace hacia la derecha
El texto, en lugar de "meterse" en el recuadro, salta hacia abajo
He puesto el overflow en visible para ver mejor lo que pasa.
el html es igual que el puesto anteriormente
el css :
Código:
.recuadro {
position: relative;
width: 193px;
height: 260px;
overflow: visible;
border: 1px solid #ccc; }
.recuadro a {
text-decoration: none;
color: #000;
display: block;
width: 386px; }
.imagen_recuadro, .detalles_recuadro {
padding: 10px;
height: 240px;
width: 173px;
}
.imagen_recuadro {
margin-top: 0;
background: #000000;
float: right;
-webkit-transition-property: margin-left;
-webkit-transition-duration: .9s;
-moz-transition-property: margin-left;
-moz-transition-duration: .9s;
-o-transition-property: margin-left;
-o-transition-duration: .9s;
-ms-transition-property: margin-left;
-ms-transition-duration: .9s; }
.detalles_recuadro {
background: #EEEEEE;
color: #666666;
font-family: Arial;
font-size: 12px;
float: left; }
.recuadro:hover .imagen_recuadro {
margin-left: 193px; }
Resultados [URL="http://jsfiddle.net/LoboBlanco/Fddf8/"]aqui[/URL]
¿Alguna ayuda, por favor?
