html - Bootstrap 3 中的响应式图像翻转过渡

Question

我有几个缩略图，每个缩略图都包含一个图像和一个标题。我之前曾使用 opacity 在 :hover 上的图像的黑白和彩色版本之间淡入淡出，但现在我已经将图像转换为Bootstrap 3 中的 img-responsive，因为它需要 position: absolute。

我设法使用 -webkit-filter: grayscale 效果而不是两个图像让它工作，但显然这只适用于兼容的浏览器。有没有办法以跨浏览器兼容的方式实现这一目标？

目前代码如下所示:

HTML

<div class="col-xs-3">
<div class="thumbnail">
<div class="thumbnail-image">
<!-- <img src="images/BW.png" class="img-responsive" alt="(Black & White)" /> -->
<img src="images/Colour.png" class="img-responsive" alt="(Colour)" />
</div>
<div class="caption">
<h3>Thumbnail</h3>
<p>Thumbnail caption.</p>
</div>
</div>
</div>

CSS

.thumbnail:hover {
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.thumbnail-image img {
transition-duration: 0.5s;
transition-timing-function: ease;
-webkit-filter: grayscale(100%);
}

.thumbnail:hover .thumbnail-image img {
-webkit-filter: grayscale(0%);
}

Answer 1

将此添加到您的 CSS 以使其在 IE7-9 中工作。

.thumbnail-image img {
transition-duration: 0.5s;
transition-timing-function: ease;
-webkit-filter: grayscale(100%);
-ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';
filter:progid: DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

.thumbnail:hover .thumbnail-image img {
-webkit-filter: grayscale(0%);
-ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=0)';
filter:progid: DXImageTransform.Microsoft.BasicImage(grayscale=0);
}