画像サイズを変更せずにCSSのborderで画像に枠をつける方法

画像サイズを変更せずにCSSのborderで画像の枠を装飾するテクニックです。

リンク画像にマウスオーバーでborderをつけることがよくありますが、
リンクエリアのサイズを変えずに、かつ、画像サイズを変えずに、となると少しテクニックが必要です。

例えば以下のような例です。
マウスオーバーで10pxの太さの赤いborderを表示させていますが、カクっとサイズが変わる感じが嫌ですね。

※分かりやすくするために極端な太さを例にしています。

単純にaタグにボーダーを追加してしまうと、その分だけリンクエリアが広がってしまいます。

そこで、以下のようにCSSを用意してあげれば、borderを追加してもリンクエリアのサイズは変わりません。

a{
	border: 10px solid red;
	overflow: hidden;
}
a img{
	margin: -10px;
}

この方法を活用すれば、マウスオーバーによるボーダー装飾のリンクサイズをうまくコントロールできますね。

a{
	overflow: hidden;
}
a:hover{
	border: 10px solid red;
}
a:hover img{
	margin: -10px;
}

以上、単純だけど意外と見落としがちなテクニックのご紹介でした。