画像hover時のlineの扱い / 画像の内側にborderを乗せてみる

このblogをsimpleで表示すると、画像にマウスを当てた時、画像を囲むlineが動きます。
たとえばこのページの画像とか。
うにょうにょウザイですか?ごめんなさい。

ちょっと考えればすぐに判る単純な仕組みなので、解説するのも恥ずかしかったりするけど
:hoverの背景にアニメーションgifを指定して、paddingでアニメーションgifが表示される分の余白を作る。です。
これたぶんcssが有効になるよりかなり前の技術ですよね。
当たり前だけどhover前にも同じ余白を作っておかないとズレます。

innerにborderを引く技なんてのもあるけど、outerにあらかじめborderを設定しておいてもズレずに済むって話です。

imgの内側にborderを乗せてみた

http://sakurachiro.com/_exercise/html_css/inner-line/
firefoxとsafariとchoromeでdisplay:inline-blockの挙動が違う気がする、inline-tableも。
imgにvertical-align:middle;でli内aのhover時の下3pxが消える?


コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.