CSS a: situar los bordes de la imagen

Question

Tengo un montón de imágenes vinculadas en una tabla, con algo de relleno. Cuando intento agregar un atributo de borde img: hover o: hover, cuando aparece el borde, todo se mueve por la cantidad de píxeles que el borde es grueso. ¿Hay alguna manera de detener este comportamiento?

Answer 1

img { 
    border: solid 10px transparent; 
} 
img:hover { 
    border-color: green; 
} 

Answer 2

El problema es que está agregando un borde al elemento que ocupa espacio, los demás elementos de la página tienen que moverse para dejar espacio para ello.

La solución es agregar un borde que coincida con el fondo, y luego simplemente cambiar el color o el estilo al pasar el mouse. Otra posibilidad es hacer que la caja sea más grande de lo que originalmente se pretendía, y luego redimensionarla para que se ajuste al borde que está agregando.

Answer 3

img:hover { 
    border: solid 2px red; 
    margin: -2px; 
} 

Parece que funciona para mí (Safari 6.0.5). Sin espacio adicional ya que el borde se dibuja en el 'interior' de la img.