My first jQuery plugin - blurStuff()

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('');

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

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

            $(this).css({
                'width': img.width(),
                'height': img.height(),
                'overflow': 'hidden',
                'position': 'relative'
            });

            var clone = img.clone();
            clone.css({
                '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 () {
                $(this).children('img:gt(0)').toggle();
            });
        }

        return blurContainers;
    };
})(jQuery);

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 tha

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:

• The efect work great. I think the approach is good, don't think

that adding four elements would be a big cost.

• You could check if the has the fixed property to avoid breaking anything.

• 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.

StackExchange Code Review Q#31578, answer score: 5