CSS - efecto cortina como el de los videos de zapiks.fr

efecto cortina como el de los videos de zapiks.fr

Publicado por pablo (2 intervenciones) el 07/03/2015 13:55:52

Hola a todos,

me gustaría programar el efecto cortina que sube cuando pones el cursor sobre un video, pero no soy capaz, he buscado mucho y solo he encontrado efectos de cortina pero en bloque, no que la cortina se superponga a la imagen que ya tenemos.

Os dejo la pagina donde lo usan para que os hagais una idea http://www.zapiks.fr

Muchas gracias.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 624

efecto cortina como el de los videos de zapiks.fr

Publicado por xve (490 intervenciones) el 08/03/2015 19:36:05

Hola Pablo, en esta misma página tienes un ejemplo:
http://www.lawebdelprogramador.com/codigo/CSS/2702-Ejemplo-del-movimiento-de-un-div-con-transition-de-css3.html

te lo he modificado para haga exactamente lo que quieres hacer...

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="utf-8">

    <style>

    .box {

        display: inline-block;

        overflow: hidden;

        position: relative;

    /* definimos la capa oculta que se movera por la pantalla al pasar el

     raton por encima de la capa "box" */

    .box .hidden {

        background: #fff;

        height: 150px;

        width: 200px;

        position: absolute;

        top: 200px;

        opacity: 1;

        -webkit-transition: all 0.7s ease;

        -moz-transition: all 0.7s ease;

        -ms-transition: all 0.7s ease;

        -o-transition: all 0.7s ease;

        transition: all 0.7s ease;

        opacity:0.8;

        filter: alpha(opacity=80);

        padding:10px;

    /* definimos la posicion de la capa cuando se pasa por encima de la clase

     box. Como esta definido que tiene una transicion, realizara el movimeinto

     hasta la paosicion left=0 */

    .box:hover .hidden {

        top: 0px;

    </style>

</head>

<body>

<div class="box">

    <img src="http://www.lawebdelprogramador.com/codigo/jquery.preview1/jquery.preview_1.jpg" width="200" height="150">

    <div class="hidden">Este es el contenido del div que subira de abajo...</div>

</div>

</body>

</html>

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

efecto cortina como el de los videos de zapiks.fr

Publicado por Pablo (2 intervenciones) el 09/03/2015 22:01:19

Hola xve,

muchas gracias por la ayuda, está perfecto y me sirve para el proyecto que me traigo entre manos.

Un saludo, y gracias otra vez.

Pablo Feijoo

Valora esta respuesta

Comentar

efecto cortina como el de los videos de zapiks.fr

Publicado por walter (47 intervenciones) el 10/03/2015 16:45:16

hola. supongo que también puede hacerse con divs conteniendo texto en vez que con imagenes añadiendo elementos ul li no?

Valora esta respuesta

Comentar

Pos: 2

Val: 624

efecto cortina como el de los videos de zapiks.fr

Publicado por xve (490 intervenciones) el 10/03/2015 19:59:46

Si, claro... en nuestro ejemplo hemos utilizado <div>, pero se puede hacer de muchas maneras...

Valora esta respuesta

Comentar

Problema con container Bootstrap

Que los botones del menú se vayan achicando.