[css] background image hover시 확대하기

React

컴포넌트에서 다음과 같이 image가 변경되는 경우

 <div
  className='product-img'
  style={{
    backgroundImage: `url(${item.url})`,
  }}
>

 

scss를 아래와 같이 설정하자 hover시 이미지가 점차 확대되었다.

 .product-img {
 ...
    background-position: center;
    background-size: 100%;
    transition: background-size 0.5s ease-in;
    &:hover {
      background-size: 110%;
    }
  }

 

 

참고사이트)

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