티스토리 hELLO 스킨 헤더 이미지에 blur 효과 넣기

HTML에서 <s_list_image>와 <s_article_rep_thumbnail> 안에 있는 div와 img에 cover-blur 클래스를 추가해주면 된다.

1. div의 thumbnail 앞에 cover-blur 넣어주기
2. img의 absolute 앞에 cover-blur 넣어주기

그리고 해당 cover-blur 클래스를 아래와 같이 설정하여 CSS에 추가해준다.

div.cover-blur {
  overflow: hidden;
}
img.cover-blur {
  filter: blur(20px);
}

 

img에 cover-blur 클래스가 설정되어 있으면 20px의 blur 효과를 주는 필터를 건다. 이때, blur때문에 지정 사이즈 밖으로 이미지가 번지기에 overflow를 hidden으로 주어 지정한 사이즈 부분만 표시되게 하는 것이다.