CSS에서 background 이미지에 마우스를 올려 hover 효과를 주고 싶을 때가 있습니다. 보통은 transform: scale(1.1)처럼 사용하게 되면 transition효과가 적용되어 자연스럽게 커지는 효과를 받을 수 있지만, transform scale이 적용되지 않은 경우가 종종 있습니다.
우선 이미지의 background size는 cover이나 다른 형태가 아닌 반드시 100%로 적용해줘야 합니다.
그리고 이 안에 transition을 넣어주면 되는데 단순히 tramsition: .3s ease; 식으로 넣으면 정상적으로 적용되지 않습니다.그렇기 때문에 transition: background-size .3s ease; 처럼 background-size를 안에 넣어줘야 합니다.
이제, hover에도 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; } .image:hover { background-size: 110%; }