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

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

0voto

OscarCanfranc comentado

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

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

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/

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/

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

0voto

kiokotzu comentado

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

0voto

Peter comentado

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

Saludos.

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

Otras Preguntas y Respuestas


...

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

Conecta