CODEWITHSUNDEEP
htmlcssinternet-explorer-8
Oshrib
Oshrib

Reputation: 1900

Filter gray image, black around png ie8

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?

Upvotes: 5

Views: 2178

Answers (2)

Matthew
Matthew

Reputation: 9949

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:

enter image description here

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?

Upvotes: 2

ScottS
ScottS

Reputation: 72261

To answer "How can i keep the gray filter + remove the black around the png?"

First

You need to realize that all the filters that are desired to be applied must be made in a single filter call. So something like what follows (but note that... 

progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)

...is the IE5.5+ equivalent to IE4 filter: gray;, see here):

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

This is because the second call to filter for the gradient will override the first call of filter: gray in your code by normal css cascade rules.

Second

The gradient is a special type of filter, a procedural surface, which does not always play nicely with other "static filters", so there is not a guarantee that grouping the two together as above will actually resolve the problem (if not, there probably is no resolving it). As you may gather by my note here, I have not tested whether this will fix your problem, but the root of your issue is my "first" point above. Whether IE8 will play nice with its own filters to fix your issue is really a "different" issue than keeping two filters on one element.

Upvotes: 1

Related Questions