background 속성을 이용한 hover효과

background 속성을 이용하여 세련된 hover효과를 만들어보자.

 

회사에서 웹사이트 동적 구현을 주로 한다지만 그래도 프론트엔드라면 간지나는 hover효과 하나는 만들 줄 알아야 한다는 생각이 들어서 만들어보았다.

 

 

유튜브의 '맛있는코딩'님을 참고했다. 간단하면서 세련된 효과를 만드는 영상이 많아서 보면서 만들었다.

맛있는 코딩 yummy coding - YouTube

맛있는 코딩 yummy coding

 

코드의 핵심은 background에 대한 부분이다. background-color가 아닌 background-image에 그라데이션을 적용해야 한다. clip을 통해 마치 마스크가 씌워진 듯한 효과가 생긴다.

-webkit-text-stroke : 1px #ccc;
-webkit-background-clip : text;
background-image : linear-gradient(0deg, #ccc, #ccc);
background-repeat : no-repeat;
transition : background-size 0.2s

 

position은 시작하는 기준을 나타낸다. size는 width, height크기를 지정할 수 있다.

background-position : 0% 0%;
background-size : 0% 100%;

 

 

See the Pen Untitled by ssoa1111 (@ssoa1111) on CodePen.