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시 부드럽게 커지는 효과를 유지하려면 어떻게 처리해야하나요?
