반응형
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 |
선생님 너무 감사합니뒤웅우이나나아다다다다다아앙
답글
너무 감사함니다. 잘보고 갑니다.
답글
비밀댓글입니다
답글
비밀댓글입니다