백그라운드 속성 애니메이션

[서유정]

div에 백그라운드 이미지를 넣고, 마우스 hover시 사이즈가 커지는 반응형 레이아웃을 만들고 있습니다.
.section-list a .img {
   background-size: 100%;
   background-position: center center;
   background-repeat: no-repeat;
   transition: all 0.3s;
}
.section-list a:hover .img {
   background-size: 110%;
}

css를 이렇게 썼는데, 반응형으로 만드려니까 반응형 분기점 바로 직전의 애매한 구간에서 
가로는 좁고 세로 길이는 그대로라서 배경이미지 위아래 흰색 여백이 생기더라고요.
백그라운드 이미지를 cover하면 되겠지만, 그러면 마우스 hover했을 때 부드럽게 커지지 않고 뚝뚝 끊겨서 커져요.
가로 폭이 좀 줄어도 위아래 여백이 생기지 않고, hover시 부드럽게 커지는 효과를 유지하려면 어떻게 처리해야하나요?

[codingapple]

cover같은건 애니메이션이 안되어서 transform 이나 background-size안에서 해결하는수밖에 없는듯요 
https://stackoverflow.com/questions/27384684/background-transition-with-background-size-cover

[글쓴이]

글