Html Bootstrap 3中的响应性图像翻转过渡

我有几个缩略图，每个都包含一个图像和一个标题。我以前使用过

不透明度

在

：hover

上的黑白图像和彩色图像之间进行淡入淡出，但现在我已经在Bootstrap 3中将图像转换为

img responsive

，因为它需要

位置：绝对

我使用

-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中，使其在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);
}

---

几个月后回到这个问题，我发现这是最具决定性的答案：

.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);
}

.grayscale { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
}