WP 밝기 또는 불투명도? - 그레이 스케일 축소판을 어둡게하고 컬러로 뒤집습니다.

Question

정상적인 이미지에서 롤오버를 색칠/어두워 진 이미지로 만드는 것에 대해 많은 질문이 있습니다. 그러나 실제로 그 반대를 시도하고 있습니다. 축소판을 그레이 스케일로 시작하고 크게 어둡게하고 롤오버에서 풀 컬러 이미지를 자연스럽게 드러내기를 원합니다.

내 회색조를 컬러 호버로 잘 전달 중입니다. 나는 이미지를 어둡게하는 문제가있어서 게시물 제목을 실제로 볼 수 있습니다. jQuery에 대해서는 아무 것도 모르지만 CSS에서는 "괜찮습니다"라고합니다.

.post_home {width: 305px; height: 175px; float: left; margin: 0 0 25px 15px; visibility: visible; filter: url("data:image/svg+xml;utf8,<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>#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE5+ */ -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */}

.post_home:hover {filter: none; -webkit-filter: grayscale(0); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");}

.thumb {display: block; width: 305px; height: 175px; position: relative; background-color: #000}

.thumb img {display: block; width: 305px; height: 175px; opacity: .4;}

.thumb img:hover {display: block; width: 305px; height: 175px; opacity: 1;}

: 여기

내가 현재 함께 일하고 있어요 코드입니다

99 %입니다. CSS는 꽤 무겁습니다. 저는 인쇄 디자이너입니다. 웹이 아니므로, 뚱뚱한 것을 볼 수 있다면, 나는 말을해야합니다. Truf Creative

Answer 1

검은 배경을 가진 상자에 이미지를 넣고 이미지에 opacity을 제공 :

이 사이트는 내가 갈거야 동일한 효과가있다.

난 그냥이 예제를 만들 : http://jsfiddle.net/jeromeM/KsbQp/