CSS 마우스 오버 효과 (이미지 확대) > 기술자료

• 목록

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

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


<style>
.zoom_image {
    overflow: hidden;
}
.zoom_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;
}
/* img 마우스 오버시*/
.zoom_image:hover img {
    cursor:pointer;
    transform:scale(1.1); /* 마우스 오버시 이미지 크기를 1.1 배만큼 확대 */
    -o-transform:scale(1.1); 
    -moz-transform:scale(1.1);
    -webkit-transform:scale(1.1);
    transition: transform .35s;  
    -o-transition: transform .35s;
    -moz-transition: transform .35s;
    -webkit-transition: transform .35s;
    /* 마우스 오버시 이미지가 즉시 커지지 않고 30.5 second 의 시간에 걸쳐 커지는 애니메이션 효과*/
}
</style>


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


참고자료
http://speedinkland.com/329
http://inforyou.tistory.com/18