CODEWITHSUNDEEP
cssgoogle-chrome
Maxence
Maxence

Reputation: 2339

Filter Grayscale not working with Chrome

I have a link in my HTML page which is an image, and is transitionning from fully grayscale to partially grayscale on hover.

Here is the HTML a bit simplified: 

<div id="myid">
    <a href="targetlinkhere"><img alt="" class="rounded" src="imglinkhere" /></a>
</div>

and my CSS :

#myid a:link,#myid a:active,#myid a:visited{
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -webkit-transition: -webkit-filter ease 1s;
  -moz-transition: -moz-filter ease 1s;
  -o-transition: -o-filter ease 1s;
  -ms-transition: -ms-filter ease 1s;
  transition: filter ease 1s;
}

#myid a:hover {
  filter: grayscale(20%);
  -webkit-filter: grayscale(20%);
  -moz-filter: grayscale(20%);
  -ms-filter: grayscale(20%);
  -o-filter: grayscale(20%);
}

Everything works fine with Firefox but Chrome doesnt apply any filter at all. And doesn't transition either. Though when I apply the above code to #myid img then the filter is applyed to the image.

Is it not right to apply a filter to an a tag ?

Upvotes: 1

Views: 11598

Answers (2)

Tim Vermaelen
Tim Vermaelen

Reputation: 7059

For those using sass or something similar, it's possible the grayscale function (and others) are overridden. The solution then would be to use a mixin untill they fix these issues.

@mixin grayscale($value) {
    filter: #{ "grayscale(" + $value + ")" };
}

.nav-link {
    transition: filter ease 0.5s;

    &:hover,
    &:active,
    &:focus {
        img {
            @include grayscale(100%);
        }
    }
}

Upvotes: 4

AM Douglas
AM Douglas

Reputation: 1903

I suspect you're inadvertently overriding the property. Try this:

#myid a {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: -webkit-filter ease 1s;
  -moz-transition: -moz-filter ease 1s;
  -ms-transition: -ms-filter ease 1s;
  -o-transition: -o-filter ease 1s;
  transition: filter ease 1s;
}

#myid a:hover {
  -webkit-filter: grayscale(20%);
  -moz-filter: grayscale(20%);
  -ms-filter: grayscale(20%);
  -o-filter: grayscale(20%);
  filter: grayscale(20%);
}

or, if you want to keep your current selectors, like this:

#myid a:link, #myid a:active, #myid a:visited {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: -webkit-filter ease 1s;
  -moz-transition: -moz-filter ease 1s;
  -ms-transition: -ms-filter ease 1s;
  -o-transition: -o-filter ease 1s;
  transition: filter ease 1s;
}

#myid a:hover, #myid a:link:hover, #myid a:active:hover, #myid a:visited:hover {
 -webkit-filter: grayscale(20%);
  -moz-filter: grayscale(20%);
  -ms-filter: grayscale(20%);
  -o-filter: grayscale(20%);
  filter: grayscale(20%);
}

Edit: so, the problem is that you need to set your a element to be a block level element, as it contains a block level img as a child.

#myid a {
    display: block; /* or inline-block would probably work too */
    /*
    All your filter stuff here
    */
}

Upvotes: 1

Related Questions