호버시 테두리 안으로,,,hover innerborder

안녕하세요 여러분.

크리에이트 메이커입니다.

 

제가 html디자인을 하던 중, 

호버 테두리 문제에 직면했는데요.

 

여러분도 아시다 시피, border도 width에 영향을 주어 다닥다닥 붙어있을 경우,

호버를 하면 다음줄로 밀려버리는 저급한 현상이 일어날 수 있습니다.

 

여러곳에서 찾아 봤지만,,

<style type="text/css">
.b { background:black; color:white; width:200px; text-align:center; padding:10px 20px; }
.b:hover { background:white; color:black; border:3px solid red; margin:-3px; border-radius:5px; }
</style>

이렇게 하라는데,

여전히 저급하게 되더군요..

다닥다닥 붙어있으면, 한쪽테두리가 다음 요소에 의해 덮힘니다..

얼마나 저급합니까 ㅎㅎ..

 

그래서 저만의 방법으로 새로 만들었습니다.

 

아주 간단합니다.

position의

relaive와

absolute를  이용해서 만들면 됩니다.

 

.videoframe {

    position: relative;

    overflow: hidden;

    margin: 0 auto;

}

.videoframe:hover .borderdiv{

    border: 5px solid rgb(3, 217, 255);

}

.borderdiv{

    position: absolute;

    width: calc(100% - 5px);

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 10;

    background-color: transparent;

}

.videoelement {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    object-fit: cover;

    z-index: 9;

}

 

자 웹디자인을 조금은 해보신분들이라면 어떤코드인지 아실겁니다.

간단합니다.

 

한 div안에 2개의 자식 요소를 겹쳐서 놓습니다.

hover호버 시에 보더가 나올 자식 요소를 투명 배경으로 index 인덱스가 앞으로 하게 둡니다.

그다음 평소 보여질 자식요소를 보더 밑에 두면,

평소에는 맨밑 자식요소가 보이겠죠.

 

하지만 hover를 하는 순간 투명한 자식이 boder가 생성 되면서 테두리가 생깁니다.

이렇게 하면 일부러 퀄리티 떨어지는 투명 보더를 둘 필요도 없고, width 가 넓어져 칸이 이동될 일도 없습니다.

 

완벽 innerborder 이너보더라고 할 수 있겠죠~~?