Foros del Web » Creando para Internet » CSS »

desplazar imagen

Estas en el tema de desplazar imagen en el foro de CSS en Foros del Web. a ver si me podéis echar un cable. quiero hacer lo siguiente: yo tengo una imagen que lleva un enlace: Cita: <a href="#"><img src="imagen.gif"></a> esta ...
  #1 (permalink)  
Antiguo 20/01/2007, 01:24
Avatar de estibaliz2006  
Fecha de Ingreso: noviembre-2006
Mensajes: 439
Antigüedad: 11 años
Puntos: 1
desplazar imagen

a ver si me podéis echar un cable. quiero hacer lo siguiente:

yo tengo una imagen que lleva un enlace:

Cita:
<a href="#"><img src="imagen.gif"></a>
esta imagen está colocada en una determinada posición en la pantalla.
lo que quiero es que al pasar el ratón sobre la imagen, como tiene enlace, ésta se desplace hacia arriba un poquito.

no sé si me entendéis. espero que sí. cómo hago esto?

gracias a todos
  #2 (permalink)  
Antiguo 20/01/2007, 03:16
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: desplazar imagen

Hola estibaliz2006

Usa este código:

Código:
<style type="text/css">
a:hover img {margin-top: -10px}
</style>
Saludos,
  #3 (permalink)  
Antiguo 20/01/2007, 03:34
Avatar de estibaliz2006  
Fecha de Ingreso: noviembre-2006
Mensajes: 439
Antigüedad: 11 años
Puntos: 1
Re: desplazar imagen

hola. gracias por tu respuesta, pero desgraciadamente no pasa nada. es decir, la imagen se queda exactamente en el mismo sitio, sin hacer nada.
por qué puede ser?
  #4 (permalink)  
Antiguo 20/01/2007, 04:57
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: desplazar imagen

Buenas.
Para que funcione al menos tu selector "a" deberá tener una posición relativa. De esa manera podrás actuar sobre el enlace al pasar por encima (hover).
Prueba con esto, y modifica los valores a los reales que necesites.

a img {top: 10px;
position: relative;
}
a:hover img { top: 8px;
}

Mikel.
  #5 (permalink)  
Antiguo 20/01/2007, 06:19
Avatar de estibaliz2006  
Fecha de Ingreso: noviembre-2006
Mensajes: 439
Antigüedad: 11 años
Puntos: 1
Re: desplazar imagen

pues chico, ni con esas.... la imagen se pone a por ejemplo 10px del top pero luego, al pasar por encima sigue ahí, no se va a 8px del top por ejemplo. nada, que no hay forma...
  #6 (permalink)  
Antiguo 20/01/2007, 08:07
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: desplazar imagen

Hola de nuevo.

No entiendo por qué no te funciona

Saludos,

Última edición por JavierB; 30/01/2009 a las 11:22
  #7 (permalink)  
Antiguo 20/01/2007, 11:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: desplazar imagen

Lo siento: me acabo de dar cuenta de que ninguno de los dos ejemplos funciona en explorer. Dentro de un rato intentaré buscar una solución.

Mikel.
  #8 (permalink)  
Antiguo 20/01/2007, 12:02
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: desplazar imagen

Así funciona en IE 6 y Firefox:

Código:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Prueba</title>
  <style type="text/css">
#cont { position: relative;
}
a:hover { position: absolute;
top: -2px;
}
  </style>
</head>
<body>
<div id="cont">
<a href="#"><img src="imagen.gif" /></a></div>
</body>
</html>
Mikel.
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 00:10.