css - 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

将您的图像放在黑色背景的框中，并为图像赋予不透明度。

我只是创建了这个例子: http://jsfiddle.net/jeromeM/KsbQp/