CSS 마우스 롤오버 이미지 흑백 컬러 변환

마우스를 움직이면 이미지의 색깔이 변합니다.

티스토리 스킨 수정에 있어 이미지에 마우스를 대면 컬러에서 흑백으로 또는 흑백에서 컬러로 변환되는 CSS 코드입니다.

CSS 마우스 롤오버 이미지 흑백 컬러 변환

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;
}

이미지에 마우스를 대지 않았을때는 흑백, 마우스를 대면 컬러로 변환되는 CSS 코드

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

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;
}