프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[CSS] CSS 이미지 흑백처리

2018.05.15
북마크 작성자 정보
<style>
.grayimg {
filter: url(filters.svg#grayscale); /* Firefox */
filter: gray; /* IE */
-webkit-filter: grayscale(1); /* Webkit */
}

.grayimg:hover {
filter: none;
-webkit-filter: grayscale(0);
}
</style>


/********************************************************************************/
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>

Then use this CSS:- [Demo]
img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}


To disable grayscale on hover you can use:-
img:hover {
filter: none;
-webkit-filter: grayscale(0);
}






이 포스트 공유하기

전체목록