(티스토리) 마우스 오버시 썸네일이 움직이는 애니메이션효과

이번에는 마우스를 이미지에 올리면 애니메이션 효과를 가지고 좌우로 움직이는 코드를 만들어 보겠습니다.

마우스 오버 시 애니메이션 효과

우선 제가 적용한 부분은 메인화면의 썸네일 부분입니다.

TIP

 

 

사용자 스킨에 따라 썸네일의 class가 다르기 때문에 크롬에서 오른쪽 마우스 클릭 후 검사를 통해 정확한 위치를 파악하는 것이 좋습니다.

 

제 스킨의 경우는 thumbnail이네요. 여러분들도 정확한 위치를 찾으셨다면, 우선 애니메이션을 만들어주셔야 합니다.

적용 하기

CSS

/*썸네일 애니메이션*/
@keyframes post-ani {
    25% {
        transform: rotate(2deg) scale(1.01);
    }

    50% {
        transform: rotate(0deg) scale(1);
    }

    75% {
        transform: rotate(-2deg) scale(1.01);
    }
}

@keyframes에 원하는 이름을 정해주신 후, deg의 숫자가 커질수록 움직이는 방향이 커지게 되며 scale은 이미지의 크기가 확대되는 효과가 있습니다. 사용자가 원하는 만큼 효과를 주면 됩니다.

 

자, 이제 애니메이션을 만들었으니 썸네일에도 애니메이션을 적용시켜주겠습니다. 

.thumbnail:hover {
	opacity: 0.9;
	animation: post-ani 0.8s linear 1;
}

TIP

 

 

마우스 오버 효과는 코드 뒤에 :hover를 작성하면 됩니다.

결과 확인

 

읽어주셔셔 감사합니다🤟