썸네일에 마우스 올리면, 이미지 확대되는 효과 (샘플 코드)

콘텐츠 목록을 보여줄 때, 웹사이트 또는 블로그에서는 썸네일, 대표 이미지를 꼭 사용합니다. 달랑 텍스트만 있으면 너무 썰렁하고 텍스트보다는 이미지에 반응하기 쉽기 때문이죠. 그리고 관심이 가는 이미지라면 마우스 커서를 올려보기도 합니다. 그때! 해당 이미지가 생동감 있게 확대되는 효과, 아마 경험해 본 적 있을 겁니다. 이 효과는 CSS만으로도 간단히 구현할 수 있어요.

설계 내용

1. 이미지에 마우스 커서를 올리면(마우스오버, mouseover) 이미지가 확대된다.
2. 정해진 영역 안에서 천천히 확대된다.
3. 마우스 커서가 떠나면, 원래대로 천천히 돌아간다.

썸네일 마우스오버, 이미지 확대

샘플 코드

코드 설명

핵심 코드는 10~19행입니다.

• transform: scale(1.5, 1.5)은 이미지에 마우스 커서를 올리면, 가로로 1.5배 그리고 세로로 1.5배 확대한다.
• transition-duration: 0.5s은 0.5초에 걸쳐서 확대한다.
• transition-duration: 1s은 마우스 커서가 떠나면, 1초에 걸쳐서 원래대로 되돌린다.
• overflow: hidden은 정해진 영역 안에서 확대되도록 한다.

라는 의미입니다.

실행 결과

제목 : 강아지 키우기

요즈음 많은 사람들이 귀여운 강아지 키우기에 관심이 있지만, 막상 키우려면 어떻게 해야 되는지 잘 모릅니다. 강아지를 키우기 위한 기본 사항을 소개합니다.