[CSS]hover했을 때 위아래로 분리되는 navigation

본 게시글은 코딩웍스 포트폴리오 실전 퍼블리싱 동영상을 참고하여 포스팅하였습니다.

 

See the Pen hover nav effect by limhaneul2244 (@limhaneul2244) on CodePen.

 

 

 

 

front와 back을 겹치게 놓아야 하므로 .item에 position: relative지정.  front와 back에position: absolute 지정

 

absolute지정시 content 크기 만큼 줄어들게 되므로 width값을 정의해주고,

front가 앞으로 나와야 하기 때문에 z-index값을 준다.

 

transition을 통해 부드럽게 위, 아래로 움직이게 하기 위해 hover가 아닌 front와 back에 transition을 지정한다.

 

 

hover가 되었을 때에는 위치값으로 박스를 어떻게 움직일지 설정할 수 있다.

(왜냐면, position을 지정했기 때문에 top, left, right, bottom 지정 가능)

 

front는 위로 올라가야 해서  top:0에서 -50%

back은 아래로 내려가야 해서 top: 0에서 50%

 

중요한점!
hover가 되기 전의 item에 원래의 위치값인 top:0을 꼭 넣어주어야
시작점을 기점으로 front와 back의 transition이 작동한다.
(top:0을 넣어주지 않으면 시작점을 못찾아서 작동 안함)

 

---

마우스 hover했을 때 이미지 움직이게 하기

 

키프레임을 통해 이미지를 움직이게 해보장

@keyframes active {
  0% {}
  50% {}
  100% {}
}

/*아래처럼 keyframes를 넣어보자*/

@keyframes active {
  0% {
    transform: scale(1); /*변화 없음*/
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1); /*변화 없음*/
  }
}

/*아래처럼 keyframes를 넣어도 동일하다*/

@keyframes active {
  0% {}
  50% {
    transform: scale(1.2);
  }
  100% {}
}

/*또 다른 방법, 0%와 100%가 동일할 경우 묶을 수 있다.*/

@keyframes active {
  0%, 100% {
  transform: scale(0.9);}
  50% {
    transform: scale(1.2);
  }
}

scale(1) 은 기본값이기때문에 넣어주지 않아도 동일하다.

 

hover가 되었을 때 변화가 있어야 하기 때문에 img에 animation을 적용.

.items .item:hover .front img {animation: active 1s linear infinite;}