콘텐츠로 건너뛰기

CSS 마우스 오버 효과 (이미지 확대)

CSS 속성으로 이미지에 마우스를 올렸을 때 이미지가 확대되는 효과로 여러 사이트나 블로그 등지에서 링크 걸린 썸네일 이미지에 많이 사용되고 있는 방법입니다. 

CSS :Hover

CSS 마우스 오버 효과 (이미지 확대) - 1

transform:scale 값을 hover 와 다른 값을 적용하여 마우스를 올렸을대 크기를 변경하고 transition으로 변경되는 속도를 조절하여 효과를 극대화합니다. 

See the Pen Untitled by INKman (@INKmans) on CodePen.

ie 10 이하에서는 transition이 적용 되지 않아 점점 커지는 효과 없이 단방에 뙇하고 커집니다. transform:scale(); 수치를 hover에 transform:scale(.5)등 낮게 적용하면 효과가 반대로 작아집니다.

.sample_image { overflow: hidden; } 

위 처럼 부모 태그에 overflow: hidden;를 추가하면 부모 태그를 벗어나지 않고 내부 이미지만 확대 됩니다.


글자 꾸미기 – 그림자, 테두리 효과 적용하기
text-shadow 속성을 이용하여 글에 그림자 효과를 부여할 수 있는데, 기본적인 그림자와 이를 응용한 테두리 효과를 표현할 수 있습니다.

태그:

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다