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
- 1464 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
-
- 690576
- 1
- Jul 5, 2015
Sin Respuesta
-
- 149
- 0
- Oct 18
-
- 183
- 0
- Jul 9
-
- 580
- 1
- Mar 19
-
- 457
- 2
- Feb 26
-
- 5028
- 0
- Nov 7, 2023
-
- 492
- 0
- Sep 19, 2023
-
- 491
- 0
- Ago 21, 2023
-
- 650
- 0
- May 14, 2023
- ver todas
Actividad Reciente
mchojrin respondió hace 1 día
Ayuda , necesito mostrar datos creados solo por el…alyvrs preguntó Oct 19
Ayuda , necesito mostrar datos creados solo por el…ManHol preguntó Jul 9
pasar un archivo de excel a csv en pythonArtEze respondió Abr 24
Alguien sabe, no me ignorenArtEze seleccionó una respuesta Abr 24
Bajar extensión de Chrome sin actualizar el navega…ArtEze respondió Abr 24
Bajar extensión de Chrome sin actualizar el navega…ArtEze preguntó Abr 24
Bajar extensión de Chrome sin actualizar el navega…ArtEze respondió Abr 24
No me deja instalar OracleArtEze respondió Abr 24
Formulario que guarde los datos de un jsonArtEze comentó Abr 24
Script /boot/ scraping
Ultimas Preguntas
Usuarios Top
- Leonardo-Tadei
- 227320 Puntos
- Peter
- 150480 Puntos
- white
- 75880 Puntos
- carlossevi
- 63580 Puntos
- magarzon
- 30650 Puntos
- pregunton
- 20400 Puntos
Todos los Usuarios Usuarios Nuevos
...