블로거 포스트 이미지에 투명 효과 주기

CSS transition의 opacity 속성을 이용하여 블로거 포스트 이미지에 마우스를 갖다대면 약간의 투명효과를 주는, 간단한 코드를 소개합니다.

CSS의 동적인 효과를 말로 설명하는데에는 한계가 있으므로, 데모를 먼저 보시기 바랍니다.

데모

두 가지 방식이 가능합니다.

하나는 데모 사이트에서처럼 이미지에 마우스 커서를 올리면 이미지가 일정 % 투명하게 변화는 방식이고, (아래 그림에서 그림2 에서 그림1로 변화)

다른 하나는 역으로, 처음부터 일정 % 투명처리된 이미지를 먼저 보여준 후 독자가 마우스를 갖다대면 정상이미지로 전환하는 방식입니다. (그림1에서 그림2로 변화)

그림1

그림2

첫번째 방식, 즉 [그림2 → 그림1]로 변화를 주는 코드는 아래와 같습니다.

 .post-body img {  
 opacity:1.0;  
 -webkit-transition: all 0.3s;  
 -moz-transition: all 0.3s;  
 -ms-transition: all 0.3s;  
 -o-transition: all 0.3s;  
 transition: all 0.3s;  
 }  
    
 .post-body img:hover {  
 opacity:0.7;  
 }  

<코드 출처 stramaxon >

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS 추가] 입니다. 투명 정도를 설정하고 싶다면 'opacity:0.7;' 이라고 적힌 부분을 조정하시기 바랍니다.

두번째 방식, 즉 [그림1 → 그림2] 로 변화를 주려면 같은 위치에 아래의 코드를 대신 입력합니다.

 .post-body img {  
 opacity:0.7;  
 -webkit-transition: all 0.3s;  
 -moz-transition: all 0.3s;  
 -ms-transition: all 0.3s;  
 -o-transition: all 0.3s;  
 transition: all 0.3s;  
 }  
    
 .post-body img:hover {  
 opacity:1.0;  
 }  

<코드 출처 stramaxon >