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