Image Rollover Borders That Do Not Change Layout

画像をタイル状に並べてロールオーバーでボーダーを表示した時、レイアウトが崩れてしまうのを防止するCSSテク。

ボーダーの太さ分だけ画像の要素が大きくなってしまうので、それを内側にボーダーを引くことで解消しています。

Image Rollover Borders That Do Not Change Layout

Problem CSS
#example-problem a img, #example-problem a   { border: none; float: left; }
#example-problem a:hover { border: 3px solid black; }

This CSS applies a border on a hover where there was none before. Layout problems ensue.

Fix #1: Inner Borders
#example-one a img, #example-one a           { border: none; overflow: hidden; float: left; }
#example-one a:hover { border: 3px solid black; }
#example-one a:hover img { margin: -3px; }

This CSS applies a negative margin on all sides of the image of the exact size of the border. This pulls the border inside and causes no layout changes.

Fix #2: Outer Borders
#example-two a img, #example-two a           { border: none; float: left; }
#example-two a { margin: 3px; }
#example-two a:hover { outline: 3px solid black; }

コメントを残す

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