티스토리 CSS 롤오버 흑백↔컬러

CSS 부분에 추가

이미지에

마우스 안댔을때 : 컬러

↓

마우스 댔을때 : 흑백

/* 이미지 컬러에서 흑백 */

img:hover {

  -webkit-filter: grayscale(100%);

  -webkit-transition: .5s ease-in-out;

  -moz-filter: grayscale(100%);

  -moz-transition: .5s ease-in-out;

  -o-filter: grayscale(100%);

  -o-transition: .5s ease-in-out;

} 

img {

  -webkit-filter: grayscale(0%);

  -webkit-transition: .5s ease-in-out;

  -moz-filter: grayscale(0%); 

  -moz-transition: .5s ease-in-out;

  -o-filter: grayscale(0%); 

  -o-transition: .5s ease-in-out;

}

이미지에

마우스 안댔을때 : 흑백

↓

마우스 댔을때 : 컬러

/* 이미지 흑백에서 컬러 */

img:hover {

  -webkit-filter: grayscale(0%);

  -webkit-transition: .5s ease-in-out;

  -moz-filter: grayscale(0%);

  -moz-transition: .5s ease-in-out;

  -o-filter: grayscale(0%);

  -o-transition: .5s ease-in-out;

} 

img {

  -webkit-filter: grayscale(100%);

  -webkit-transition: .5s ease-in-out;

  -moz-filter: grayscale(100%); 

  -moz-transition: .5s ease-in-out;

  -o-filter: grayscale(100%); 

  -o-transition: .5s ease-in-out;

}