Title: Blurred overlay/background
Last modified: August 22, 2016

---

# Blurred overlay/background

 *  [norawaters](https://wordpress.org/support/users/norawaters/)
 * (@norawaters)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/blurred-overlaybackground/)
 * first of all, thank you so very much for this nice and useful plugin. I just 
   started using it.
    The last couple of days I tried to make the overlay background
   blur based on this lines:
 * $(“fancybox”).fancybox({
    beforeShow: function () { $(“body *:not(#fancybox-overlay,#
   fancybox-overlay *)”).addClass(“blur”); }, afterClose: function () { $(“body *:
   not(#fancybox-overlay, #fancybox-overlay *)”).removeClass(“blur”); } });
 * and of course
 * .blur {
    -webkit-filter: blur(5px) }
 * But I don’t seem to be able to tweak it into your js. I will admit I’m a supernoob.
   I hope you can help me.
 * [https://wordpress.org/plugins/easy-fancybox/](https://wordpress.org/plugins/easy-fancybox/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Rolf Allard van Hagen](https://wordpress.org/support/users/ravanh/)
 * (@ravanh)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/blurred-overlaybackground/#post-5563526)
 * Hi, a nice idea. Sad that the filter is currently only supported on webkit…
 * To adapt your code to Easy Fancybox, please be aware that it is based on FancyBox
   1.3.4 which does not have beforeShow or afterClose. Instead, you must use onComplete
   and onClosed (or onCleanup) … You can find an ‘onComplete’ in the easy-fancybox-
   settings.php which you could convert to hold your blur function. And you’d have
   to add an ‘onClosed’ equivalent for the unblur.
 * Also, be aware that your changes will be lost on the next plugin update!
 *  Thread Starter [norawaters](https://wordpress.org/support/users/norawaters/)
 * (@norawaters)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/blurred-overlaybackground/#post-5563587)
 * Thank you soo much!! You think this is correct (I can’t make it work, not super
   sure)?
 * ‘onComplete’ => array (
    ‘default’ => ‘function() { $(“#fancybox-overlay”).css({-
   webkit-filter: blur(10px)}); }’, …
 *  [Rolf Allard van Hagen](https://wordpress.org/support/users/ravanh/)
 * (@ravanh)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/blurred-overlaybackground/#post-5563641)
 * The jQuery included with WordPress runs in noConflict mode. Try replacing the`
   $` with `jQuery`.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Blurred overlay/background’ is closed to new replies.

 * ![](https://ps.w.org/easy-fancybox/assets/icon-256x256.png?rev=3188201)
 * [Firelight Lightbox](https://wordpress.org/plugins/easy-fancybox/)
 * [Support Threads](https://wordpress.org/support/plugin/easy-fancybox/)
 * [Active Topics](https://wordpress.org/support/plugin/easy-fancybox/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/easy-fancybox/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/easy-fancybox/reviews/)

## Tags

 * [blurred](https://wordpress.org/support/topic-tag/blurred/)

 * 3 replies
 * 2 participants
 * Last reply from: [Rolf Allard van Hagen](https://wordpress.org/support/users/ravanh/)
 * Last activity: [11 years, 5 months ago](https://wordpress.org/support/topic/blurred-overlaybackground/#post-5563641)
 * Status: not resolved