[DEMO] マウスオーバー時に、レイアウトを崩さずに画像にborderを表示するテクニック [詳細]

下記のサンプルは、a 要素と内包する img 要素だけにスタイルを適用するだけで実現できるお手軽なマウスオーバー効果です。
IE6 の場合、標準準拠モード、後方互換モードで多少 CSS の記述に違いがあるので注意してください。
(また、実際に導入した際に、前後のレイアウト要素などの影響でネガティブマージンの値を微調整しないといけないケースがあったので、
使用の際は注意してください。大体の場合、左右のネガティブマージンを倍にすることで解決できると思います)

  • bell
  • bell
  • bell

下記のサンプルは、float を利用した、画像の内側に border を表示するテクニックです。
こちらは、float を使うため、それをクリアするために a 要素に親要素が必要になります。
(クリアが必要ない場合は親要素は必要ありません)

  • bell
  • bell
  • bell