画像の内側に線を引く方法

参考サイト:http://css-tricks.com/image-rollover-borders-that-do-not-change-layout/

2つ方法があるみたい。

1つ目:マイナスマーシンする方法

#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; }

残念ながらこの方法だと私の場合は右側に余白があいてしまった為、ダメでした。

2つ目:outlineを使う方法

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

こちらの方法がうまく表示されました。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

w

%s と連携中