CSS / background-img hover시 서서히 이미지 확대하는 방법

어떤 슬라이드 클론 코딩을 하는데 처음 보는 케이스가 있었다.

img태그 src에는 opacity:0의 빈. png를 연결하고

background-img 속성을 줘서 여기에 진짜 이미지를 넣는 것이다!!

 

코린이이다 보니 모든 것이 새롭고 어렵다

gpt한테 물어보니 빈 이미지를 넣는 것은 사이즈를 규정해서 통일감을 주기 위해서라고 함

슬라이드 안에 여러 카드를 만들고 각 카드마다 다른 이미지를 사용할 텐데

이미지 사이즈에 따라서 레이아웃이 틀어지는 것을 방지하기 위해서?

 

이때 골머리를 앓았던 부분은 다음이다.

img:hover시 background-img가

1. 사이즈가 커지는데

2. 서서히

 

떠오르는 대로 아래와 같이 구현했더니 사이즈는 커지는데, "서서히"가 적용이 안됨

.menu_roll .roll img {

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center;

    transition: background-size 1s linear;

}

.menu_roll .roll:hover img {

    background-size: 110%;

}

 

gpt가 scale을 추천해서 써봤는데

서서히는 되는데 레이아웃이 달라졌다

img:hover시 background-img가

1. 사이즈가 커지는데

2. 서서히

 

는 딱 한 줄만 수정하니 해결됐다.

 

background-size: cover;  -----> background-size: 100%;

 

헐...