Foros del Web » Creando para Internet » CSS »

Cambio de imagenes con efecto hacia arriba

Estas en el tema de Cambio de imagenes con efecto hacia arriba en el foro de CSS en Foros del Web. Hola amigos, quisiera hacer un codigo en el cual se haga un cambio de una imagen al hacer hover, pero que el hover hiciera una ...
  #1 (permalink)  
Antiguo 17/09/2014, 16:25
 
Fecha de Ingreso: febrero-2011
Mensajes: 195
Antigüedad: 13 años, 3 meses
Puntos: 1
Cambio de imagenes con efecto hacia arriba

Hola amigos, quisiera hacer un codigo en el cual se haga un cambio de una imagen al hacer hover, pero que el hover hiciera una funcion de que vaya apareciendo la nueva imagen de abajo hacia arriba poco a poco.

Alguien me puede ayudar??
  #2 (permalink)  
Antiguo 17/09/2014, 22:48
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 824
Antigüedad: 13 años, 1 mes
Puntos: 116
Respuesta: Cambio de imagenes con efecto hacia arriba

Usa jQuery.
Y de abajo hacia arriba heee?

Buscate acerca de jQuery UI y ese efecto que mencionas, Google tiene muchas letras que mostrarte

slideDown, slideUp o animate, etc... buscale [jQuery UI]

http://jquery-manual.blogspot.com/20...idedown-y.html

o ya que estamos en CSS, puedes usar esas cosas maravillosas de CSS3, como translate y animation
http://davidwalsh.name/background-animation-css

PD: Mi respuesta es solo una Orientacion.
__________________
Programador jQuery & PHP
  #3 (permalink)  
Antiguo 18/09/2014, 13:21
 
Fecha de Ingreso: febrero-2011
Mensajes: 195
Antigüedad: 13 años, 3 meses
Puntos: 1
Respuesta: Cambio de imagenes con efecto hacia arriba

La idea es esta, tener un codigo como este:

Código PHP:
<style
#box{
    
width:180px;
    
height:180px;
    
backgroundurl(Zombatar_7.jpg)no-repeat;
}

#box:hover {
    
backgroundurl(Zombatar_1.jpg)no-repeat;
}
</
style>


<
div id="box"></div
y una vez que se hace el hover, que la imagen del hover aparezca poco a poco de abajo hacia arriba. Solo con css.
  #4 (permalink)  
Antiguo 18/09/2014, 14:32
 
Fecha de Ingreso: marzo-2011
Ubicación: Oaxaca
Mensajes: 252
Antigüedad: 13 años, 2 meses
Puntos: 17
Respuesta: Cambio de imagenes con efecto hacia arriba

Cita:
Iniciado por andoencombi Ver Mensaje
La idea es esta, tener un codigo como este:

Código PHP:
<style
#box{
    
width:180px;
    
height:180px;
    
backgroundurl(Zombatar_7.jpg)no-repeat;
}

#box:hover {
    
backgroundurl(Zombatar_1.jpg)no-repeat;
}
</
style>

<
div id="box"></div
y una vez que se hace el hover, que la imagen del hover aparezca poco a poco de abajo hacia arriba. Solo con css.

Lo que puedes hacer ahi amigo es hacer una imagen con las 2 imagenes (1 arriba de la otra) y en el hover le puedes poner algo asi

Código:
#box:hover {
    background-position: 0 200px;
   transition:all 3s ease; 
        -o-transition:all 3s ease;
        -moz-transition:all 3s ease;
        -webkit-transition:all 3s ease;
}
el 0 es del eje x (como no quieres que se mueva del eje x, por eso lo dejamos en 0)
200px es en el eje Y, suponiendo que cada imagen mide 200px en el eje Y, se movera y se mostrara solo lo que quieres ver ;)
  #5 (permalink)  
Antiguo 18/09/2014, 14:35
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 9 meses
Puntos: 2114
Respuesta: Cambio de imagenes con efecto hacia arriba

Puedes usar fondos múltiples y hacer una transición de la posición de la segunda imagen.

Código CSS:
Ver original
  1. #box{
  2.   width:180px;
  3.   height:180px;
  4.   background:  url(Zombatar_1.jpg)no-repeat,
  5.                url(Zombatar_7.jpg)no-repeat;
  6.   background-position: center 180px, center;
  7.   transition: background 600ms ease-out;
  8. }
  9.  
  10. #box:hover {
  11.   background-position: center 0, center;
  12. }

Cargar jQuery sólo para esto es una burrada.
__________________
(:

Etiquetas: arriba, efecto, hacia, hover, imagenes
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:51.