HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

画像サイズを変更せずに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;
}

てんとう虫

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

このエントリーをはてなブックマークに追加

Reference

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search