이미지 마우스오버 안쪽테두리 주기

html

<a href="#" class="innerborder"><img src="http://placehold.it/200x200"></a> 

 

css

img {vertical-align: top;} /*4px gab을 위한 처리*/
.innerborder {float: left; overflow: hidden;}
.innerborder:hover img {margin:-5px;}
.innerborder:hover {border:5px solid blue;}

1. img요소만큼 공간값을 가지기위해 float 지정.

2. img에 margin을 -5px을 줌으로써 img를 감싼 a요소의 크기가 상하좌우 -5px씩 줄어듬

3. a요소에 overflow:hidden을 주어 img 넘치는 부분을 가림.

4. 줄어든 5px만큼 border값을 지정

 

출처: https://fmafma0182.tistory.com/34 [름름]