구글 블로그(blogger) 본문 이미지 호버 효과 #1

블로거 본문 이미지에 마우스 커서를 갖다대면, 그림자가 생기거나 형태가 변형되는 간단한 호버 효과의 몇가지 예입니다.

동적인 효과는 그림이나 글로는 설명하기가 어려우므로, 데모 블로그를 참고하시기 바랍니다.

데모 보기


본문 이미지 호버 효과 데모 1 적용 코드

 .post-body img {  
 border:0;  
 padding:0;  
 -moz-transition: all 1s;  
 -webkit-transition: all 1s;  
 -o-transition: all 1s;  
 -ms-transition: all 1s;  
 transition: all 1s;  
 }  
 .post-body img:hover {  
 box-shadow: 0px 0px 15px #000000;  
 border-radius: 50%;  
 }  

본문 이미지 호버 효과 데모 2 적용 코드

 .post-body img {  
 border:0;  
 padding:6px;  
 -moz-transition: all 1s;  
 -webkit-transition: all 1s;  
 -o-transition: all 1s;  
 -ms-transition: all 1s;  
 transition: all 1s;  
 }  
 .post-body img:hover {  
 box-shadow: 0px 0px 15px #000000;  
 }  

본문 이미지 호버 효과 데모 3 적용 코드

 .post-body img {  
 border:0;  
 padding:0;  
 border-top-right-radius:50%;  
 box-shadow: 0px 0px 15px #000000;  
 -moz-transition: all 1s;  
 -webkit-transition: all 1s;  
 -o-transition: all 1s;  
 -ms-transition: all 1s;  
 transition: all 1s;  
 }  
 .post-body img:hover {  
 border-radius:0;  
 }  

본문 이미지 호버 효과 데모 4 적용 코드

 .post-body img {  
 border:0;  
 padding:0;  
 border-radius:50%;  
 box-shadow: 0px 0px 15px #000000;  
 -moz-transition: all 1s;  
 -webkit-transition: all 1s;  
 -o-transition: all 1s;  
 -ms-transition: all 1s;  
 transition: all 1s;  
 }  
 .post-body img:hover {  
 border-radius:0;  
 }  

다른 CSS 스타일 설정과 마찬가지로, 코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가], 또는 HTML 편집 모드에서

 ]]></b:skin>  

코드 바로 앞의 자리입니다.

그림1

! 코드 적용시 한가지 주의해야할 점은 기존 템플릿에 적용되어 있는 본문 이미지의 스타일 설정입니다. 블로그에서 기본으로 제공하고 있는 '깔끔', '풍경', '세련', '무늬', '초현실', '여행' 템플릿의 경우, 템플릿에 따라서 패딩이나, 그림자 등 간단한 스타일 설정이 되어 있는 경우가 있습니다.

 .post-body img  

그런 경우, 위의 본문 이미지 스타일 설정 코드를 찾아서 패딩, 그림자 등 겹치는 부분이나 문제가 될 부분을 삭제하여야 합니다.

! 테스트용 블로그에서 백업한 템플릿으로 충분한 테스트를 마친 후 코드를 적용하시기 바랍니다.


! 코드 내용을 이해하는데 도움이 될 만한 글.
CSS border-radius 이해하기
CSS box-shadow 이해하기