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

   
Vista:

efecto cortina como el de los videos de zapiks.fr

Publicado por pablo pfeijo@gmail.com (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 claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

efecto cortina como el de los videos de zapiks.fr

Publicado por xve (349 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...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!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 claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

efecto cortina como el de los videos de zapiks.fr

Publicado por Pablo pfeijo@gmail.com (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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

efecto cortina como el de los videos de zapiks.fr

Publicado por xve (349 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
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar