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:
Ver original.imagen{
border-width:0;
margin: 0 24px 12px 24px;
}
.imagen:hover{
border: 2px solid navy;
}