(CSS) background-size에 hover transition animation 적용 안될때 해결방법

오늘은 background image를 hover시 확대되는 효과와 자연스러운 transition 애니메이션 효과를 간단하게 해결해보도록 하겠습니다.

background-size transition animation

CSS에서 background 이미지에 마우스를 올려 hover 효과를 주고 싶을 때가 있습니다. 보통은 transform: scale(1.1)처럼 사용하게 되면 transition효과가 적용되어 자연스럽게 커지는 효과를 받을 수 있지만, transform scale이 적용되지 않은 경우가 종종 있습니다.

---

먼저, 효과는 아래처럼 적용해주려고 합니다.

컨텐츠 요소에 마우스를 hover 시키면 이미지가 확대되는 형식인데, background-size를 사용한 방법입니다.

 

우선 이미지의 background size는 cover이나 다른 형태가 아닌 반드시 100%로 적용해줘야 합니다.

.image {
    width: 100%;
    height: 100;
    background-size: 100%;
}

그리고 이 안에 transition을 넣어주면 되는데 단순히 tramsition: .3s ease; 식으로 넣으면 정상적으로 적용되지 않습니다.

 

그렇기 때문에  transition: background-size .3s ease; 처럼 background-size를 안에 넣어줘야 합니다.

 

그리고 사파리, 파이어폭스 브라우저와 같은 곳에서도 적용될 수 있도록 아래와 같이 코드를 삽입할 수도 있습니다.

.image {
    width: 200px;
    height: 200px;
    background: url(https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80) no-repeat center;
    background-size: 100%;
    transition: background-size .3s ease;
    -moz-transition: background-size .3s ease;
    -web-kit-transition: background-size .3s ease;
}

이제, hover에도 background-size를 퍼센트 형식으로 넣어주기만 하면 됩니다.

.image:hover {
    background-size: 110%;
}

See the Pen Untitled by 서근 (@seogun95) on CodePen.

---

오늘은 이렇게 background image를 hover시 확대되는 효과와 자연스러운 transition 애니메이션 효과를 적용하는 방법에 대해 알아보았습니다.

 

읽어주셔서 감사합니다 🤟