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 opera(i have opera prefix too). I found, the way how this can be used, but i need to turn brightness filter into svg code. Any ideas how can i do this?
What i have to do, is a small gallery, with darkened images, and with normal images on hover without using 2x images.

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.