Image Grayscale CSS Effect

Question

I want to reduce the brightness of my image with CSS.

I'm using Mozilla Firefox and this is my code:

-moz-filter: brightness(0.5);
filter: brightness(0.5);

Why is it not taking effect?

Answer 1

img {
  -webkit-filter: brightness(100%);
  -moz-filter: brightness(100%);
  filter: brightness(100%);
}
img:hover {
  -webkit-filter: brightness(50%);
  -moz-filter: brightness(50%);
  filter: brightness(50%);
}

It's all you need! I checked in Firefox and Chrome, code is working
jsfiddle-link

Answer 2

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    -moz-filter: brightness(100%);
    filter: grayscale(100%);
}

img:hover {
    -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
    -moz-filter: brightness(50%);
    filter: grayscale(50%);
}