Hacer Pregunta

Conecta

entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

0voto

como puede lograr este efecto con css3 o jquery

preguntó
Escritorio
1450 Vistas
3 Respuestas
solucionada

hola comunidad,
quisiera saber como se puede hacer este efecto que cuando pase el puntero del mouse por encima del menu, el hover empiece desde el centro y termine en el final de cada extremo como en la imagen que adjuntoenter image description here

por kiokotzu (1.960 puntos) en Escritorio

0voto

OscarCanfranc comentado

No entiendo bien. ¿Primero es azul y se va haciendo negro desde el centro? ¿O cómo es?

por OscarCanfranc (570 puntos)

0voto

kiokotzu comentado

si correcto así como dices, primero es azul y cuando se realiza el hover se va haciendo negro desde el centro hasta completar todo elazul

por kiokotzu (1.960 puntos)

3 Respuestas

3votos

kiokotzu Puntos1960

hola muchachos gracias a todos,
les comparto como puede realizar el efecto solo con css3
http://jsfiddle.net/kiokotzu/QM3XQ/

por kiokotzu (1.960 puntos)

7votos

didac_rios Puntos690

Por lo que intuyo, vas a necesitar almenos un contenedor, llamemos-le a por que parece ser que es un menu

Entonces dos elementos que sean las partes que van a moverse, por ejemplo dos divs situadas dentro del a y darle los efectos reposicionandolos en el hover

<ul>
<li>
    <a href="#">
        <span class="content">Home</span>
        <div class="cortina top"></div>
        <div class="cortina down"></div>
    </a>
</li>
</ul>

li {
list-style-type:none;
position:relative;
}
a {
    display:inline-block;
    width: 100px;
    height: 100px;
    line-height: 100px;
    color: white;
    background: lightblue;
    text-align:center;
    position: absolute;
    z-index: 2
    -webkit-transition: all 1.4s ease-in-out 1.3s;
    -moz-transition: all 1.4s ease-in-out 1.3s;
    -o-transition: all 1.4s ease-in-out 1.3s;
    transition: all 1.4s ease-in-out 1.3s;        
}

.cortina {
    background: red;
    height: 50%;
    width: 100%;
    top: 0;
    position: absolute;
    z-index: 1;
    -webkit-transition: all 1.4s ease-in-out 1.3s;
    -moz-transition: all 1.4s ease-in-out 1.3s;
    -o-transition: all 1.4s ease-in-out 1.3s;
    transition: all 1.4s ease-in-out 1.3s;       
}
.content {
    position: relative;
    z-index: 5;
    margin: auto;
    color: black;
}

.down { 
    top: 50px; 
    background: yellow;
}

a:hover .cortina {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

a:hover .top {
    top: -50px;
}

a:hover .down {
    top: 100px;
}

http://jsfiddle.net/cadid/FEfE7/

por didac_rios (690 puntos)

3votos

Gustavo Puntos1350

Que te parece este con un poco de jquery
El HTML

<!doctype html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="custom.js"></script>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3">Home</div>
        </div>
    </div>
</body>
</html>

El CSS

#div1{
    background: red;
    height: 300px;
    width: 100px;
    z-index: 2;
}
#div2{
    background: black;
    height: 0px;
    position: relative;
    width: 100%;
    z-index: 5;
}
#div3{
    color: yellow;
    position: relative;
    top: 50%;
    text-align: center;
    z-index: 6;
}

El JavaScript

$(function(){
    var alto_mayor = $("#div1").height();
    console.log(alto_mayor);
    var posicion_inicial_menor = alto_mayor / 2;
    console.log(posicion_inicial_menor);
    $("#div2").css({
        top: posicion_inicial_menor
    });

    $("#div1").hover(
        function(){
            $("#div2").animate({height:alto_mayor, top:0}, 500);
        },
        function(){
            $("#div2").animate({height:0, top:posicion_inicial_menor}, 500);
        }
    );
});

Puedes verlo en funcionamiento en: http://jsfiddle.net/gustavofernandez/UKgZ3/2/
PD: Bonito reto =D

por Gustavo (1.350 puntos)

0voto

kiokotzu comentado

hola muchachos gracias a todos,
les comparto como puede realizar el efecto solo con css3
http://jsfiddle.net/kiokotzu/QM3XQ/

por kiokotzu (1.960 puntos)
editado por

0voto

Peter comentado

Si esa es la solución, por favor agrégala como respuesta y márcala como correcta.

Saludos.

por Peter (150.480 puntos)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Etiquetas

Categorías

Conecta