この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が消える？
img {
border:none;
vertical-align:middle;
}
a {
border:none;
display:inline-block;
overflow:hidden;
}
a:hover {
border:10px solid #333;
}
a:hover img {
margin:-10px;
}
関連記事かもしれん:
乱雑モックアップのフィード