[ CSS ] image hover시 border를 넘지 않게 설정하는 방법

📍 image hover시 border를 넘지 않게 설정하는 방법

스타벅스 프로젝트를 하던 중 이미지에 커서를 올리면 이미지가 확대되어 사용자가 현재 어떤 card를 보고 있는지 알려주는 기능을 구현했다. 그런데, 이미지가 card 컴포넌트를 빠져나가서 다음과 같이 보였다.

 

 

해결방법은 간단한데 overflow:hidden에 있다.

1. image에 새로운 div로 감싼다.
2. div 스타일에 overflow:hidden을 추가한다.
3. 완성!

 

 

별거 아닌것 같지만 이런 디테일적인 요소까지 고려해야 고객의 사용성이 긍정적으로 느낄 수 있다.