This short article will show how you can produce a motionblur that works in most of the browsers. Since the css3 filters don’t cover this effect, I came up with the idea to use some existing methods to make a workaround for this. This method involves the use of SVG code and the use of visual msie filter. SVG has a very good support among modern browsers and the syntax is not so hard to understand and to learn so I suggest to let’s get into it and try out this new cool effect.

SVG code can be placed inside the HTML very easily. First we set the introductory tag with the namespace and then we can add the image tag and after the svg code we place also an img tag.

    
  • dog
  • dog

After we have the structure, we can take care of the SVG motion blur filter, that we will add whenever we want in the document, for instance at the end, before the closing body tag.

    
	      	
	           
		              
	           
       
    

First we set on the svg tag the version number and namespace, then we add a defs tag that will hold definitions, like filter definitions, no objects here just filter primitives. Then there is the filter tag, that has an id for later reference. Finally the feGaussianBlur is used, you might heard of the Gaussian blur, so this might be familiar to you. The stdDeviation attribute holds the horizontal and the vertical blur values. If only one value is set, it will assign that same value to both horizontal and vertical which will not produce any motion blurring at all, just simple blur. After we finished the HTML/SVG part, we can continue with the css, removing the blur on hover.

    .motion-blurred image:hover, .motion-blurred img:hover {
       filter: none
    }

Now for older IE browsers we will use the MotionBlur direct X filter:

    .motion-blurred image, .motion-blurred img {
       filter: progid:DXImageTransform.Microsoft.MotionBlur(strength=60,direction=-90)
    }

You can set the strength the same way as stddeviation and also the angle of the motion blur with the direction property.

All what is left is to hide the svg code for svg non supporting browsers, plus the ones that support msie filters and hide the html image for svg supporting browsers.

I will use condition tags for this one:

   

Also we set the html img tag to be hidden initially:

    .motion-blurred img {
	       -ms-filter: "progid:DXImageTransform.Microsoft.MotionBlur(strength=60,direction=-90)";
	       display:none
    }

There you have it, your first motion blur effect. Have fun.