CSS图像过滤器-浏览器兼容性

Question

I'm looking for a smooth solution to implement a filter (blur + opacity) to images - working on the most popular browsers (sadly, IE counts as well!), and my code isn't working properly:

-webkit-filter: blur(3px) opacity(40%);
-moz-filter: blur(3px) opacity(40%);
-o-filter: blur(3px) opacity(40%);
-ms-filter: blur(3px) opacity(40%);
filter: blur(3px) opacity(40%);

http://caniuse.com/#feat=css-filters

I need an alternative to svg markup, too much to adjust:

<svg>
  <image ... />
  <filter id="test">
    <feGaussianBlur stdDeviation="3"/>
    <feComponentTransfer>
      <feFuncA type="table" tableValues="0 0.8"/>
    </feComponentTransfer>
  </filter>
</svg>

.tile:hover image{ filter:url(#test); }

There has to be an easier solution than this, adjusting my markup to work with svg is too much work.

a demo of the gallery I'm building can be viewed here

Thanks in advance for your help or hints!

Answer 1

The CSS filter is 175 characters. The SVG markup is 195 characters. If you want IE support, you have to use SVG. It's not that bad.