desplazar imagen

estibaliz2006 · #1 (**permalink**) 20/01/2007, 01:24

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

yo tengo una imagen que lleva un enlace:

Cita:

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

JavierB · #2 (**permalink**) 20/01/2007, 03:16

Hola estibaliz2006

Usa este código:

Código:

<style type="text/css">
a:hover img {margin-top: -10px}
</style>

Saludos,

estibaliz2006 · #3 (**permalink**) 20/01/2007, 03:34

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?

Mikmoro · #4 (**permalink**) 20/01/2007, 04:57

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.

estibaliz2006 · #5 (**permalink**) 20/01/2007, 06:19

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...

JavierB · #6 (**permalink**) 20/01/2007, 08:07

Hola de nuevo.

No entiendo por qué no te funciona

Saludos,

Mikmoro · #7 (**permalink**) 20/01/2007, 11:39

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.

Mikmoro · #8 (**permalink**) 20/01/2007, 12:02

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.