img要素(画像)の内側にborder(枠・罫線)をつける方法

2012.06.07 ,

写真一覧でサムネイルのimg要素(画像)をhoverした時に内側に枠（border）をつけたい時、ただborderを指定してしまうとレイアウトが崩れてしまいます。 最初から枠ののついた画像を２枚用意するのなんて手間だし！ そんな時に使えるプチテクをご紹介。

目次

まずは完成イメージの確認

結果だけ知りたい方はこちら

サムネイルをリストで並べて、クリック画像を大きく表示する時なんかによくあるレイアウトです

hoverした時にちゃんと内側に赤い重なれば正解！

先ずはHTMLソースの確認

サムネイルをリストで並べるパターンを想定してます。

HTMLはこんな感じ
<ul>
<li><a href="#"><img src="pic.png"></a></li>
<li><a href="#"><img src="pic2.png"></a></li>
<li><a href="#"><img src="pic3.png"></a></li>
</ul>

何のへんてつも無い<li>と<a>と<img>を用いて組んだだけのhtml

borderプロパティだけ使った場合。

やっぱり外にborderをつけるだけだとレイアウトが崩れちゃうし、大きさが変わっちゃう！
hoverしてみてください。

サンプルを別画面で開く CSSはこんな感じ
a {
	margin-right: 10px;
	display: inline-block;
	vertical-align: middle;
}
a:hover img {
	border: 10px solid #FF9798;
}

outlineプロパティを使った場合。

img要素の外側にborderがついてしまいますが、レイアウトは崩れません。

サンプルを別画面で開く CSSはこんな感じ
a {
	margin-right: 10px;
	display: inline-block;
}
a:hover img {
	outline: 10px solid #FF9798;
}

これで解決！

親要素にborderプロパティ、img要素（画像）にネガティブ（マイナス）マージンを使った場合。

サンプルを別画面で開く CSSはこんな感じ
a {
	display: block;
	overflow: hidden;
}
a:hover {
	border: 10px solid #FF9798;
}
a:hover img {
	margin: -10px;
}

<a>にhoverした時にborderをつけて、hoverの時の<img>にborderと同じだけの値をmarginでマイナスしてしまう方法

これで解決！