Html CSS悬停灰度未激活

我正在尝试使图像灰度默认为悬停淡入彩色。考虑到我希望悬停只与图像关联，我对它有一些问题

/* MAKE ALL FEATURED IMAGES BLACK AND WHITE */
.banner-wrap .featured-thumbnail {

    width: 270px !important;
    height: 149px !important;

}

.featured-thumbnail img{

  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 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

.featured-thumbnail img:hover{

  filter: none;
  -webkit-filter: grayscale(0%);
}

/*使所有特色图像黑白*/
.横幅包装。特色缩略图{
宽度：270px！重要；
高度：149px！重要；
}
.img{
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；/*Firefox 3.5+*/
过滤器：灰色；/*IE6-9*/
-webkit过滤器：灰度（100%）；/*Chrome 19+和Safari 6+*/
}
.特色缩略图图像：悬停{
过滤器：无；
-webkit过滤器：灰度（0%）；
}

我发现谷歌在css hover中将灰度转换为彩色似乎无法处理div中的图像。似乎可以很好地通过制作元素使其工作！重要的