Mostrar borde en imagen en rollover

[Anya82]

Tengo una imagen, la cual tiene que ser un link a otra pagina.
Quiero que el borde NO se vea cuando esta en su estado normal, pero que si se pinte cuando el cursor esta sobre la imagen.

He intentado agregar borde al img con la pseudo-clase :hover, pero cuando aparece el borde, se mueve la imagen asi como el contenido que lo rodea. Ademas, lei que IE solo aplica la pseudo-clase hover a los <a>

Alguien podria ayudarme?


EDICION:

Hice una clase .imagen, y se la agregue a mi <a>, la cual rodea mi imagen, pero sigue moviendose.
Ademas, no se porque el borde no me rodea la imagen, sino que aparece como un rectangulo DEBAJO del <img>. ¿Acaso no escribi bien el HTML?

Código HTML:

<a href="pagina.html" class="imagen"><img src="images/producto.png" width="150" height="150"/></a> 

Aqui esta mi CSS

Código CSS:

.imagen{
    border-width:0;
    margin: 0 24px 12px 24px;
}
 
.imagen:hover{
    border: 2px solid navy;
}
 

[Dalvenjha]

Podrías poner la imagen dentro de un link, en el estado normal, darle un borde del color de tu fondo y en el estado hover cambiarle el color del borde.

También podrías darle un margin de 1px en el estado normal y quitarselo y ponerle borde en el estado hover.

Y así un sinfín de opciones =)

Saludos!

[Anya82]

Si lo habia pensado, pero olvide mencionarles que el fondo tiene una imagen.

[rafret]

Iniciado por Dalvenjha

Podrías poner la imagen dentro de un link, en el estado normal, darle un borde del color de tu fondo y en el estado hover cambiarle el color del borde.

También podrías darle un margin de 1px en el estado normal y quitarselo y ponerle borde en el estado hover.

Y así un sinfín de opciones =)

Saludos!

HOla mi nombre es rafret he puesto mi tema pero hace dos dias no recibo respuesta me puedes ayudar?
mi tema es problemas con div en internet explorer 6

[Dalvenjha]

uhmm el fondo tiene una imagen?, entonces haz un falso border, ponle a tu imagen 1px de padding, luego en el background normal pones none, entonces en el estado hover, pones el background del color que quieras y voila! tienes un falso border =)

[kseso?]

A ver si he comprendido bien:
.- Tienes una imagen como link. Lo cual debería traducirse en el html en algo así:

Código HTML:

<a href="#" title="título del enlace"><img src="imagen.jpg" alt="texto alternativo" /></a>
 

.- Esa imagen tiene como background otra imagen colocada vía css.
---------> Ello implica que deberá tener un padding para que se vea por los lados el bg
.- Esa imagen carece de bordes en estado normal
.- Al :hover deseas que aparezca un borde a la imagen de 1px sin que ello conlleve movimiento de los elementos adyacentes (que es lo lógico).

Si mi comprensión es cierta, sólo necesita añadir al "a:hover img" un margen negativo de igual valor a la anchura del borde.
Y si tienes declarado valores para el margen del enlace (o de la imagen dentro del enlace), restarle el valor del borde.

El css quedaría algo como:

Código CSS:

a img {
background: url(imagen.jpg);
padding: 5px;
border: 0;
margin:10px;
}
a:hover img {
border: 1px solid #fe0;
margin: 9px;
}
 

[Dalvenjha]

Pues es una de las cosas que ya le mencioné antes, aunque tb has puesto el código =D.

Pd.- Tengo la mala costumbre de pensar que lo que yo entendería a la primera los demás lo entenderán igual.

[Anya82]

hola a todos. Gracias por su ayuda.

Acabo de leer sus opiniones, y mi problema lo resolvi similar a lo que me comentaron:

cuando mi imagen esta en hover, indico que tenga el border.
cuando esta en estado normal, le quito el border, pero a los padding les di valores negativos.

Código CSS:

a.imagen img{
    border-width:0;
    margin: 0 24px 12px 0px;
}
 
a.imagen:hover img{
    border: 2px solid navy;
    margin: -2px 22px 10px -2px;
}