I've played with jQuery for some time now but have never written my own plugin.

A question was asked: "can I blur an image using jQuery?" and I thought this to be a decent candidate to play with.

Here's my code so far:

(function ($) {
    $.fn.blurStuff = function (options) {
        var defaults = {blurRadius:2, deblurOnHover:false};
        var settings = $.extend(defaults, options);

        $(this).wrap('<div data-blurimage />');

        var blurContainers = $(this).closest('[data-blurimage]');

        blurContainers.each(function () {
            var img = $(this).children();

                'width': img.width(),
                'height': img.height(),
                'overflow': 'hidden',
                'position': 'relative'

            var clone = img.clone();
                'opacity': 0.2,
                'position': 'absolute'

            $(this).append(clone.clone().css({'left': +settings.blurRadius, 'top': +settings.blurRadius}));
            $(this).append(clone.clone().css({'left': -settings.blurRadius, 'top': +settings.blurRadius}));
            $(this).append(clone.clone().css({'left': +settings.blurRadius, 'top': -settings.blurRadius}));
            $(this).append(clone.clone().css({'left': -settings.blurRadius, 'top': -settings.blurRadius}));

        if (settings.deblurOnHover == true) {
            blurContainers.hover(function () {

        return blurContainers;

In action: http://jsfiddle.net/gvee/xvvWj/

Example usage:

$('img').blurStuff({deblurOnHover: true, blurRadius: 2});

My working logic is to wrap the selector in a parent container and then append 4 translucent clones to this, where each clone is positioned slightly off centre.

This works pretty well so far and I'm pleased with my progress but I can conceive a couple of potential bugs that I wanted some opinions on!

  1. Is my approach reasonable? I realise that I'm appending an extra 4 elements to the DOM on each call which is not ideal (I could get away with using just two, laterally or diagonally, but I think 4 produces a better effect)...
  2. What to do if a user passes a fixed position element? This will break existing flow.
  3. Should I bother validating/sanity checking the parameter values? If so, how should I approach this? Previously I had a parameter called blurOpacity but I removed this because I realised that the wrong values (e.g. 1) effectively "breaks" things.

2 Answers 2


In the code I only would modify the variable declarations:

var defaults = {blurRadius:2, deblurOnHover:false},
settings = $.extend(defaults, options),
img, blurContainers, clone;

Personal preference, but you can read a discusion about it here.

Answering your questions:

  1. The efect work great. I think the approach is good, don't think that adding four elements would be a big cost.
  2. You could check if the has the fixed property to avoid breaking anything.
  3. By the parameters you have rigth now I shouldn't bother. If you decide to add the opacity again it would be a good idea to check it. If greater than 0.x use the default instead.
  • 1
    \$\begingroup\$ hey, thanks, for sure I'm going to visit you on monday, at work :P \$\endgroup\$
    – Gonz
    Feb 15, 2014 at 2:22

overall it's pretty good! But I have a few minor points:

  • The constant references to $(this) are bad. That call creates a jQuery collection each time. You could just save this as a variable.

    var $this = $(this);
  • You could combine your defaults and settings to save a reference;

    var settings = $.extend({
      blurRadius: 2, 
      deblurOnHover: false
    }, options);
  • \$\begingroup\$ I'd probably argue that he should be using chaining rather than just caching $this \$\endgroup\$
    – megawac
    Feb 18, 2014 at 21:37
  • \$\begingroup\$ @megawac I am comfortable with the concept on caching but not on chaining, can you elaborate please? \$\endgroup\$
    – gvee
    Feb 19, 2014 at 10:22
  • \$\begingroup\$ @megawac Perhaps, but it doesn't help from a performance point of view. Calling append once with an array of elements would probably be better. \$\endgroup\$
    – Jivings
    Feb 19, 2014 at 16:03
  • \$\begingroup\$ masonry.desandro.com/methods.html \$\endgroup\$
    – megawac
    Feb 19, 2014 at 16:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.