[팁 ] 이미지 흑백 필터 롤 오버 효과

참고 

http://bennettfeely.com/filters/

이 사이트엔 흑백 외 여러 이미지 필터들이 정리 되어 있다.

직접 사진을 업로드 해 테스트도 가능하다

예시

HTML/CSS

<style>
img{ transition: all 1s; } <-- 변환 속도 조절 -->
img:hover{
     -webkit-filter: grayscale(1);
     -o-filter: grayscale(1);
     filter: grayscale(1);}
</style>

롤 오버시 흑백 처리

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

흑백 필터 -> 롤 오버 시 원본

❄️ 설명

-webkit- : 크롬, 사파리 웹브라우저에 적용 시킨다

-moz- : 모질라, 파이어폭스 웹브라우저에 적용 시킨다

-ms- : 마이크로소프트사의 인터넷익스플로러에 적용 시킨다

-o- : 오페라 웹브라우저에 적용시킨다

transition : 1s; 

: 이미지에 롤 오버시 다음 액션으로 변환 되기 까지의 시간이다