티스토리스킨 반응형#2 이미지 확대효과주기

티스토리 스킨 포럼에서 질문이 있어서 답글로만 알려드렸던 내용인데 댓글로 질문을 달아주신 분이 있어서 작성해봅니다.

티스토리스킨 반응형 #2 메인화면, 글목록화면과 게시물안의 이미지에 확대효과주기입니다.

 

 

이미지위에 마우스를 가져다 대면 이미지가 살짝 확대되는 효과입니다.

 

 

 

 

솔직히 너무 많이 주면 버벅일 수도 있어서 이런 효과는 조심해서 주는편이긴한데 나름 괜찮아서 추가해보았습니다. 현재 제 블로그화면들의 이미지를 확인해보시면 어떤 느낌의 효과인지 확인하실 수 있습니다. 본 게시물에 들어간 이미지들 위로 마우스를 가져다 대면 살짝 커지죠?

 

 

 

 

 

 

일단, 위의 CSS는 메인화면 즉, 글 목록화면의 썸네일에 적용되는 소스입니다.

줄 수를 보시고 비슷한 위치에 넣어주시면 됩니다.

 

소스는 아래

.list_content .thumbnail_post img{-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;}
.list_content .thumbnail_post img:hover{-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-o-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05);}

 

 

 

 

 

 

위의 소스는 게시물 안에 넣은 이미지입니다.

 

소스는 아래

.area_view img{-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;}
.area_view img:hover{-webkit-transform:scale(1.05);-moz-transform:scale(1.05);-o-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05);}

 

 

 

이미지가 살짝 커지는 정도로만 효과를 줘야 괜찮은거 같네요.

왜냐면 원래 이미지 사이즈를 강제로 늘리기 때문에 해상도를 살짝 손해봐야하거든요~

 

추가로 간단히 속성을 설명드리자면

 

transition:all .3s -> 확대되는 시간입니다. 0.3초를 뜻합니다. 적절히 조절하시면 됩니다.

scale(1.05);  -> 확대되었을때의 이미지배율입니다. 1.05배를 뜻합니다. 

 

 

 

무지!

 

도움이 되셨다면 아래 하트버튼 꾸욱~!!!!

하트가 힘이 돼요~ㅋ