CSS transition not working for my filter: brightness()?

Question

I have these icons that are images that I want to apply a filter on on-hover. However, it doesn't seem to be working.

My code:

.icon {
   -webkit-transition: all 1s ease;
   transition:  all 1s ease;
}
.icon:hover {
   -webkit-filter: brightness(130%);
    filter: brightness(130%);
}

Answer 1

It should be noted that filter does not work on Internet Explorer or Firefox 35 or earlier. If you are using those browsers, it will not work. However, if you are using a compatible browser, as you can see here, it will work.

img {
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

img:hover {
  -webkit-filter: brightness(130%);
  filter: brightness(130%);
}

<img src="https://cr2014studyabroad.files.wordpress.com/2014/12/pineapple-2.png" width=200 height=200 />

For more information on this experimental technology, visit these links

https://developer.mozilla.org/en-US/docs/Web/CSS/filter http://www.w3schools.com/cssref/css3_pr_filter.asp