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 adjunto
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
como puede lograr este efecto con css3 o jquery
- preguntó
- Escritorio
- 1324 Vistas
- 3 Respuestas
- solucionada
3 Respuestas
hola muchachos gracias a todos,
les comparto como puede realizar el efecto solo con css3
http://jsfiddle.net/kiokotzu/QM3XQ/
Por favor, accede o regístrate para añadir un comentario.
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;
}
Por favor, accede o regístrate para añadir un comentario.
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 favor, accede o regístrate para añadir un comentario.
Por favor, accede o regístrate para responder a esta pregunta.
En el blog
-
- 407133
- 1
- Jul 5, 2015
Sin Respuesta
-
- 167
- 0
- Mar 19
-
- 83
- 2
- Feb 26
-
- 1107
- 0
- Nov 7, 2023
-
- 297
- 0
- Sep 19, 2023
-
- 303
- 0
- Ago 21, 2023
-
- 386
- 0
- May 14, 2023
-
- 355
- 0
- Abr 21, 2023
-
- 442
- 0
- Mar 31, 2023
- ver todas
Actividad Reciente
ArtEze seleccionó una respuesta hace 6 horas
Bajar extensión de Chrome sin actualizar el navega…ArtEze respondió hace 6 horas
Bajar extensión de Chrome sin actualizar el navega…ArtEze preguntó hace 6 horas
Bajar extensión de Chrome sin actualizar el navega…ArtEze respondió hace 8 horas
No me deja instalar OracleArtEze respondió hace 9 horas
Formulario que guarde los datos de un jsonArtEze comentó hace 9 horas
Script /boot/ scrapingSantiago2610 comentó Mar 23
Acualizar ChoiceField en djangoSantiago2610 preguntó Mar 19
Acualizar ChoiceField en djangogonzalss preguntó Feb 26
Script /boot/ scrapingParkJo preguntó Ene 30
No me deja instalar Oracle
Ultimas Preguntas
Usuarios Top
- Leonardo-Tadei
- 227320 Puntos
- Peter
- 150470 Puntos
- white
- 75880 Puntos
- carlossevi
- 63580 Puntos
- magarzon
- 30650 Puntos
- pregunton
- 20400 Puntos
Todos los Usuarios Usuarios Nuevos
...