CODEWITHSUNDEEP
jquerycssblureffect
Dennis
Dennis

Reputation: 147

Filter:Blur Firefox Issue

I tried to add a blur effect on an image + text, effects on a click in Java.

It works fine in chrome and safari.

But I had no chance to get this effect working in firefox.

Code:

$('.newsletter').click(function(){
    $(".overlay_newsletter").fadeIn();

    $(".name, li, .newsletter, svg, .header-links").css({
            '-webkit-filter': 'blur(3px)',
            'filter': 'blur(3px)',
            '-moz-filter': 'blur(3px)'});

    $(".menu-expand").css({
            '-webkit-filter': 'blur(8px)',
            'filter': 'blur(8px)',
            '-moz-filter': 'blur(8px)',
            'opacity':'0.5'});

    $(".logo").css({
            '-webkit-filter': 'blur(8px)',
            'filter': 'blur(8px)',
            '-moz-filter': 'blur(8px)'});
  });

Hope someone can help me here :)

Upvotes: 0

Views: 814

Answers (2)

Dennis
Dennis

Reputation: 147

I tried this

filter: url("data:image/svg+xml;utf9,<svg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'><filter%20id='blur'><feGaussianBlur%20stdDeviation='2'%20/></filter></svg>#blur");

It works fine in FF, but is there a way to trigger this in jquery on a click event?

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105863

you should set the unprefixed rule last .

$('.newsletter').click(function(){
  $(".overlay_newsletter").fadeIn();

  $(".name, li, .newsletter, svg, .header-links").css({
        '-webkit-filter': 'blur(3px)',
        '-moz-filter': 'blur(3px)',
        'filter': 'blur(3px)'});

$(".menu-expand").css({
        '-webkit-filter': 'blur(8px)',
        '-moz-filter': 'blur(8px)',
        'filter': 'blur(8px)',
        'opacity':'0.5'});

$(".logo").css({
        '-webkit-filter': 'blur(8px)',
        '-moz-filter': 'blur(8px)',
        'filter': 'blur(8px)'});

});

Beside older version of FF need an svg in order to apply a blur effect. https://developer.mozilla.org/en/docs/Web/CSS/filter

Upvotes: 3

Related Questions