Brightness filter in firefox and opera without svg file

Question

For my current project i used filter -webkit-filter: brightness(-20%);-moz-filter: brightness(-20%); But somewhy, this filter doesnt works in firefox and

Answer 1

You want to use an SVG filter. An example of a filter that will darken your image by a fixed amount in each channel is:

<filter id="darken">
<feComponentTransfer>
       <feFuncR type="linear" intercept="-0.2" slope="1"/>
       <feFuncG type="linear" intercept="-0.2" slope="1"/>
       <feFuncB type="linear" intercept="-0.2" slope="1"/>
   </feComponentTransfer>
</filter>

This will darken your image by 20% in each color channel. Full jsfiddle

Answer 2

If you need a more cross-browser solution, you could make the images translucent when they are not hovered:

img {
    opacity: .7;
}
img:hover {
    opacity: 1;
}

This will have the effect of darkening them when they are on a dark background.