zoom effect : 점점 커지는 효과

zoom effect

이미지 위에 마우스를 올리면 커지는 효과.
쇼핑몰 사이트에서 흔히 볼 수 있음

See the Pen css - zoom effect by luckyzi (@luckyzi) on CodePen.

코드 해석 주석

.zoom-effect {
/* 이미지가 확대되더라도 컨테이너 밖으로 안 보이게 함*/
  overflow: hidden;
}
.zoom-effect img {
/* 이미지 비율 유지하며 크기 조정 */
  object-fit: contain;
/* 확대 효과 애니메이션 */
/* : 대상 적용시간 방식 */
  transition: transform 0.5s ease-out;
}

.zoom-effect > img:hover {
/* scale은 확대 비율. 하나의 값은 전체 비율을 조정. 
두개의 값은 수평 및 수직을 각각 적용한다 */
  transform: scale(1.5);
}

 

over-flow:
컨텐츠를 레이아웃에 맞출 수 없을 때 처리 방법

See the Pen Untitled by luckyzi (@luckyzi) on CodePen.

 

object-fit:
컨텐츠를 레이아웃에 맞출 수 없을 때 처리 방식

See the Pen css - object-fit by luckyzi (@luckyzi) on CodePen.

• contain
  • 이미지가 비율을 유지하면서 부모 요소 안에 들어가기 때문에, 좌우로 여백이 생길 수 있음.
  • 결과: 이미지 전체가 보여도 여백이 생김.
• cover
  • 이미지가 비율을 유지하면서 부모 요소를 덮기 때문에, 위아래가 잘릴 수 있음
  • 결과: 이미지가 부모 요소를 꽉 채우지만 일부가 잘림.

 

참고자료

• https://www.w3schools.com/howto/howto_css_zoom_hover.asp
• https://developer.mozilla.org/ko/docs/Web/CSS/overflow
• https://www.w3schools.com/css/css3_object-fit.asp
• https://developer.mozilla.org/ko/docs/Web/CSS/object-fit