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

스킨편집 들어간 후 ,

CSS 맨 마지막 부분에 붙여넣기

 

1. 컬러→마우스 갖다대면 흑백으로 변환

 

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

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

 

2. 흑백→마우스 갖다대면 컬러로 변환

 

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

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

 

*만약 흑백이 아닌 밝게, 블러 이런 효과를 넣고 싶다면 아래 더보기 블로그에서 참고 한 후 grayscale 이 부분을

원하는 효과로 바꿔주면 된다.  

 

↓아래 블로그 글 여러가지 효과 참고

https://euncho.medium.com/css-filter-aee094d474c8