Filter gray image, black around png ie8

Question

I have filter on some images that make them gray, and only hover on them make them color:

.bxslider2 img {
   display: inline;
   float: left;
   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%);
   -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
.bxslider2 img:hover {
   filter: none;
   -webkit-filter: grayscale(0%);
   -moz-filter:grayscale(0%);
}  

I want to keep that code, but i have problem on ie8 - only there i see black around the images. I found solution, but this solution remove the gray filter, and i cant find way to combine it:

.bxslider2 img {
   background: transparent;
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
   zoom: 1;
}

This code remove the black around the image - and that's good, but it also remove the gray efect. How can i keep the gray filter + remove the black around the png?

Answer 1

I think I might have an easier solution for you. When turning off the ie8 css you added, the only images which cause problems are the ones which have space outside the round circle.

See here when I select the images that the ones with issues are larger with transparent space outside the circle than the ones without:

It looks like all the images without black borders are 76x75 pixels and the ones with the issues are 85x85 pixels. If you crop these down to size so that these is not extra transparent space on the outside does the problem go away?