所以这里有很多关于将正常图像翻转为彩色/变暗图像的问题，但我实际上正试图做相反的事情。我希望我的缩略图以灰度开始，显着变暗，并在翻转中显示自然的全彩色图像。
我的灰度到颜色悬停工作正常。我只是在使图像变暗时遇到问题，因此我实际上可以看到我的帖子标题。我对 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