So not too long ago, Mike and I were having a tweetversation about the very snazzy effect Mr. Matas was employing on his new site, namely the blurred photos off to each side of the currently selected photo:

The Tweeetversation

Both Mike and I were trying to guess what awesome trickery-fu was being employed to do that, and is it turns out we were both wrong, since Mr. Matas used the tried and true process of having two images, one blurred and one not, to achieve the beautiful UI he created.

While there is nothing wrong with that, I decided to see if there was anyway out there in the bowels of the interwebs that could achieve the same effect, but without needing two images. Turns out there is, but it only works in Firefox at the moment.

SVG + HTML == WIN

So it seems that Firefox, for some time, has had support for applying a number of SVG filters to HTML elements. There are some caveats to it but for the most part, it is extremely awesome. You can get the goods, info wise, from mozillazine.

There are a number of things you can do with them, but for this article I am going to be focusing on the gaussian blur filter. For the most part, this is pretty straightforward, other than calling the SVG filter. Here is the HTML we will be using for this demo:

So this is a pretty basic page, that imports the SVG namespace so the filter we add later will actually work. That is pretty important... obviously. So now we have our markup, so lets add the SVG filter:

Right, so this is fairly simple. The only bit we need to concern ourselves with at this time is the line where we set the deviation. If you are familiar with Photoshop or Gimp, think of this as the amount of blur to add to the HTML element you are applying the filter to.

So now we have setup our filter to blur a piece of HTML. Now lets apply it to our image. The best way to do this is through CSS:

.blur { filter:url(#f1);}
.pic { width: 250px; -moz-box-shadow: 1px 1px 5px #000;}
.big { width: 800px;}

So there are 3 rules here. First is the rule that applies the filter to our image. Using CSS to apply it means we can do some interesting things via javascript later. You will notice that we gave the filter an id of f1. This was so we could call it later in our CSS as show above.

The next two rules allow us to size the image to manageable dimensions (.pic), and .big gives us the ability to switch the size of the image via javascript later.

Technically now we are done, the image will load in the page and have a blur applied to it. But lets go one step further and setup some code to allow us to remove the blur on mouseover and enlarge the image:

$(document).ready(function() {
    $('#carousel ul li img').hover(function() {
        $(this).addClass('big');
        $(this).removeClass('blur');
    },
        function() {
            $(this).removeClass('big');
            $(this).addClass('blur');
        }
    )
});

This of course relies upon jQuery being included in your page. Now when one mouses over the image we remove the blur class which clears our vision, and adds the big class which, well makes the image bigger. On mouseout we restore the classes to their previous places. Simple.

The only thing left to mention is that you need to save your file as .xhtml for this to work. I haven't put any time into discovering why this is, although I am sure that there is a good reason, and that there is a way around it if you are cunning enough.

To see the effect in the real world, simply hop on over to the demo page in a recent version of Firefox. As always comments and twitter mentions are open and being tracked.