overflow: hidden 영역 밖으로 커지면 안보이게 하기

아래의 그림에 transform : scale(1.3) 을 통해서 확대를 하게되면

원본 이미지

sacle(1.3) 으로 1.3배 커진 이미지

이미지의 사이즈가 커지게 된다

근데 난 사이즈는 변하지 않고 이미지만 돋보기로 보듯 zoom 시키는 효과를 주고 싶다면?

scacle 한 후 부모 요소의 width, height 부분만 보이게 한다

이미지 영역 크기는 그대로두고 위처럼 zoom in 효과로 일부 확대한 것처럼 보고 싶다면

scale속성은 그대로 두고

이미지의 부모 요소에

overflow: hidden;   

을 설정해주면 부모 요소를 벗어나는 자식 요소를 hidden 으로 보이지 않게 할 수 있다