*CSS 부분에 추가
01
마우스 안 댔을 때 컬러 > 댔을 때 흑백
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | /* 이미지 컬러에서 흑백 */ 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; } | cs |
02
마우스 안 댔을 때 흑백 > 댔을 때 컬러
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | /* 이미지 흑백에서 컬러 */ 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; } | cs |