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

반응형

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

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

아래 이미지에 마우스를 올리면 효과를 확인할 수 있습니다.

<div class="sample_image">
<img src="이미지">
</div>

.sample_image  img {
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);	
	-o-transform:scale(1);	
	transform:scale(1);
	-webkit-transition:.3s;
	-moz-transition:.3s;
	-ms-transition:.3s;
	-o-transition:.3s;
	transition:.3s;
}
.sample_image:hover img {
	-webkit-transform:scale(1.2);
	-moz-transform:scale(1.2);
	-ms-transform:scale(1.2);	
	-o-transform:scale(1.2);
	transform:scale(1.2);
}

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

.sample_image { overflow: hidden; }

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

반응형

'블로그&인터넷 > 기타' 카테고리의 다른 글

크롬 유튜브에서 이상한광고  (0)	2018.01.03
블로그 사진 배경  (0)	2017.01.01
CSS 마우스 오버 효과 (이미지 확대)  (4)	2016.12.25
제이쿼리 탑버튼  (0)	2016.12.24
Color Scripter 소스코드 강조하기  (0)	2016.12.19
반응형 블로그 동영상 자동 크기 조절 방법  (6)	2016.12.19