-
[CSS] transform scale을 이용한 Image Zoom 애니메이션 넣기Dev 2020. 12. 29. 11:16
안녕하세요.
오늘은 이미지 Zoom 효과를 주는 법에 대해 포스팅합니다.
이 포스팅에서 최종적으로 구현해 볼 효과는 다음과 같습니다.
고정된 요소에 마우스를 올렸을 때 이미지만 확대되는 것처럼 보이는 효과입니다. 저는 Album이나 Article 형태의 퍼블리싱을 작업하면서 간단한 hover 효과를 주고 싶을 때 자주 사용합니다.
우선 기본적인 컨테이너와 이미지, 텍스트 배치를 해 봅시다.
.container { width: 700px; height: 700px; border: 1px solid #222; } .parent { width: 100%; height: 500px; } .child { width: 100%; height: 100%; }<div class="container"> <div class="parent"> <img class="child" src="image.jpeg"/> </div> <h1>핑핑이</h1> </div>
자, 핑핑이가 화면에 나타나지만 아무런 효과가 일어나지 않습니다. 이제 hover를 추가해 봅시다.
CSS의 transform 속성으로 요소에 회전, 크기 조절, 이동 등의 효과를 부여할 수 있습니다. 그 중에서도 transform, scale을 활용하면 크기가 확대되는 효과를 줄 수 있습니다. 한번 추가해 봅시다.
.parent:hover .child { transform: scale(1.2); -webkit-transform: scale(1.2); /* 크롬, 사파리 */ -moz-transform: scale(1.2); /* 파이어폭스 */ -ms-transform: scale(1.2); /* IE */ -o-transform: scale(1.2); /* 오페라 */ }중요한 점은 parent에 마우스를 가져다 두었을 때 이미지인 child가 확대되어야 한다는 점입니다. 한번 확인해 보겠습니다.
이미지가 확대되지만 2가지의 문제점을 발견하였습니다.
1. 이미지가 확대되면서 전체 영역을 벗어난다.
2. 부자연스럽게 확대되었다가 축소된다.
차근차근 해결해 봅시다.
우선 이미지가 컨테이너 영역을 벗어나면 보여지지 않게끔 overflow 속성을 추가해 줍시다.
.parent { width: 100%; height: 500px; overflow: hidden; }transition 속성을 이용하면 요소의 속성값을 정해진 시간동안 부드럽게 변경할 수 있도록 해줍니다. transform을 사용할 때 자연스러운 동작을 구현하려면 transition이 필수로 동반되어야 합니다.
.parent:hover .child { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); /* IE 9 */ -o-transform: scale(1.2); transition: transform 0.3s; }이제 transform을 통해 크기 변화가 일어날 때 0.3초에 걸쳐 서서히 변하게 될 것입니다.
한번 확인해 볼까요?
얼추 완성된 것도 같지만 뭔가 이상합니다. 마우스를 올릴 때는 Zoom이 자연스럽게 되지만 떼는 순간 바로 원래 크기로 돌아가버리네요.
이부분도 최적화를 위해 child의 hover 상태 뿐 아니라 기본 CSS에도 transform과 transition 속성을 추가해 줍니다.
.child { ... transform: scale(1.0); -webkit-transform: scale(1.0); -moz-transform: scale(1.0); -ms-transform: scale(1.0); -o-transform: scale(1.0); transition: transform 0.3s; }자, 이제 완성입니다!
최종 코드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Zoom 애니메이션 추가하기</title> <style> .container { width: 700px; height: 700px; border: 1px solid #222; } .parent { width: 100%; height: 500px; overflow: hidden; } .child { width: 100%; height: 100%; transform: scale(1.0); -webkit-transform: scale(1.0); -moz-transform: scale(1.0); -ms-transform: scale(1.0); -o-transform: scale(1.0); transition: transform 0.3s; } .parent:hover .child { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); /* IE 9 */ -o-transform: scale(1.2); transition: transform 0.3s; } .container h1 { font-size: 36px; } </style> </head> <body> <div class="container"> <div class="parent"> <img class="child" src="image.jpeg"/> </div> <h1>핑핑이</h1> </div> </body> </html>
성공적으로 구현되었습니다!
이상으로 포스팅을 마칩니다 :)
'Dev' 카테고리의 다른 글
[GAS] 구글 앱스 스크립트를 이용해 구글 설문 결과 슬랙 알람을 만들어보자(Feat. django) (0) 2021.01.12 내 사이트 이미지 로딩속도는 왜 느릴까? (1) 2020.12.22 내 맘대로 추천하는 프론트엔드/리액트 개발자를 위한 편리한 VSCode Extension(확장 프로그램) 모음 (0) 2020.12.15 [django] shell 스크립트를 이용해 배포 자동화하기 (0) 2020.11.30 웹 개발에서 svg 형식의 이미지 파일을 활용해보자 (0) 2020.10.04
