¿Como hacer con CSS Efecto cortina o persiana en las cuatro direcciones?

[Loboblanco2]

Hola a todos

Estoy intentando conseguir con CSS que un recuadro con una imagen se desplace para presentar un texto. El típico efecto cortina o persiana.

He encontrado información y ya he conseguido que me funcione en dirección hacía arriba.

Querría saber hacerlo en las otras direcciones : hacia abajo, hacia la derecha y hacia la izquierda.

¿Alguien sabe cómo hacerlo y puede ayudarme? Preferiblemente sin JQuery, MooTools y similares

Muchas gracias, un saludo

[pzin]

Pon el código que tengas hecho. No debe de ser muy complicado adaptarlo para que funcione en otro dirección.

[C2am]

Que te parece algo así:
http://ksesocss.blogspot.com/2012/11...o-animado.html
Saludos

[Loboblanco2]

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]

[pzin]

Para cambiarlo a la izquierda, habría que flotar .imagen_recuadro y .detalles_recuadro, para no añadir otro elemento se le da un ancho al elemento A —para lo cual hay que convertirlo en elemento de bloque— y luego el margen negativo se le da para la izquierda.
Para hacerlo hacia la derecha, el proceso es parecido pero habría que flotar un elemento a la derecha y el otro a la izquierda —y así no tocar HTML.

Código CSS:

.recuadro {
  position: relative;
  width: 193px;
  height: 260px;
  overflow: hidden;
  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;
    float: left;
}
  
.imagen_recuadro {
  margin-top: 0;
  background: #000000;
 
  -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;
}
 
.recuadro:hover .imagen_recuadro {
    margin-left: -193px;
}
 

Para hacer el efecto hacia abajo supongo que no habrá otra forma que dándole posición relativa a A, y luego posiciones absolutas a la imagen y al texto de tal forma que intercambiaran sus posiciones respecto a cómo están en el HTML.

[Loboblanco2]

Muchisimas gracias Bonez

Lo leeré con detenimiento, lo probaré. Seguro que me viene genial

Además ha sido una respuesta rapidisima, doble agradecimiento

[Loboblanco2]

Copiado el codigo : el efecto cortina a la izquierda, funciona y queda genial.

Muchas gracias Bonez, eres fantástico

A ver si en un par de días logro, con tus indicaciones, hacer la cortina hacía la derecha, que tu has hecho ¡en 5 minutos! jaja

[Loboblanco2]

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?

[pzin]

Cambiando un poco el concepto para este caso, creo que era más fácil que el margen-left y la transición se le aplicara a A. Quedaría algo así: http://jsfiddle.net/Fddf8/2/

[Loboblanco2]

¡ Genial !

Bonez, ¡eres fabuloso!

Evidentemente funciona perfecto. Muchas gracias.

*

Me pondré ahora a pelearme con la cortina descendente.

Quizá con el cambio de concepto que has aplicado pueda conseguirlo.

Reitero mi agradecimiento

[Loboblanco2]

¡ Lo he conseguido! El efecto cortina desdendente me funciona.

Con las pistas de Bonez , alguna idea que había pensado ya antes, unas cuantas pruebas porque no salía, analizar los otros códigos, he logrado que funcione.

Lo difícil ya estaba hecho en los anteriores, claro

Muchas gracias por la ayuda, Bonez , en mis principios de programar un poco en CSS.

El resultado y el código (he variado un poco el html inicial, además del CSS) aquí :

http://jsfiddle.net/LoboBlanco/6hVyz/

[Loboblanco2]

Me gustaría aprender a hacer efectos cortina en diagonal.

No sé si es posible solo con CSS.

He empezado por el efecto cortina diagonal hacia arriba y hacia la izquierda, que me parece que será el menos difícil.

Por ahora estoy francamente despistado.

No consigo ni que el texto se situe en su sitio, es decir que empiece debajo y a la derecha de la imagen (creo).

Agredeceré pistas

[pzin]

http://jsfiddle.net/Fddf8/5/

Es parecido a #8 y #9, cambiando los floats y añadiendo margin-top negativo.

[Loboblanco2]

¡Simplemente genial!

Muchas gracias Bonez

Una vez que lo leo, me parece evidente, pero hasta que no has puesto el código no lo había conseguido.

A ver si a partir de todo lo que me has enseñado consigo hacer las otras cortinas diagonales.

Estoy aprendiendo mucho, mis más sinceras gracias por tus enseñanzas Bonez

*

He puesto el código de Bonez del efecto cortina diagonal hacia arriba y la izquierda y el resultado (para ir teniendo todo organizado) aquí : http://jsfiddle.net/LoboBlanco/WyzD5/

[pzin]

Igual no sería mala cosa ponerle de color de fondo #EEEEEE a .recuadro para que no quede todo tan cuadriculado. Aunque ya es cosa de gustos y de lo que busques.

Y ahora pregunto, ¿todo esto era curiosidad por aprender o es que necesitas que tiren hacia todos los lados?

[Loboblanco2]

Bonez : muchas gracias por todo

He estado unos días con otros temas, pero tengo idea de comprobar si sé hacer el efecto cortina para todos los lados.

Sobretodo es por aprender. Tengo idea de utilizar el efecto cortina como presentación en algunas partes de mi web. Y hacerlo en distintos sentidos para dar un poco de variedad. Por ahora solo es un proyecto que voy pensando.