Blur effect CSS3 Firefox(linux)

Question

I'm trying to get a blur effect on my photogallery if the user is not registered. I got it, but only for chrome. In my Firefox 14.0.1 (linux) I'm not able to get it working

My html template (I develop under django)

<h2> Gallerie</h2>
<ul class="galeria" id="imagenes">
{% for image in gallery %}
    {% if user.is_authenticated %}
        <a rel="prettyPhoto[gallery]" href="{{image.url}}">
            <img width="120px" height="120px" alt="{{image.comment}}" src="{{image.url}}"/>
        </a>        
    {% else %}
        <img class="blur" alt="{{image.comment}}" src="{{image.url}}"/>
    {% endif %}
{% endfor %}
</ul>

My site.css

img.blur{
    -webkit-filter: grayscale(0.5) blur(10px);
    filter: grayscale(0.5) blur(10px);
    width:120px;
    height:120px;
}

Any help would be appreciated. Thanks :)

Answer 1

Gecko does not support the filter property. It only works in IE (filter) and WebKit (-webkit-filter). To apply blur effects in Gecko-based browsers (like Firefox) you could make use of SVG Filters. Here is a good explanation how to use SVG Filters for a gaussian blur. These SVG Filters only work in Gecko so you still need your old code for WebKit & IE.

Answer 2

This explanation worked better for me.

http://css-plus.com/2012/03/gaussian-blur/