Web Site Primer

HTML · Web Design · Color Charts · & More!

CSS Styling: Image Blur Filter ;

Originally Published: 2007-01-31
Updated:
This article delves into how to share the CSS styling for creating a filter effect that will blur image links.

I will remind in advance that many of the CSS filters work in Internet Explorer only since they are a Microsoft creation. It is not known if these effects, or filters, will become supported by other browsers or if they will come out with supported-variants.

At the time of posting this article I tested this page in Firefox and Opera browsers. The Blur Filter did not work in either regardless of what I had read on a couple of other sites, aimed at MySpace users, that erroneously claimed this effect worked in all browsers. It just goes to show you can't believe everything one reads, huh?

Therefore one should take into careful consideration about how much dependence a Web site's contents will rely on limited browser support (e.g. filters or any other touches) as browser-preference styles, or HTML, may affect or force away part of the targetted audience attracted to the site.

Do not rely solely on browser stats for a site in making such decisions as that not always a reliable source of information. For example, I may show up on your site's stats as using 800 x 600 resolution but that would not be correct as I typically visit sites with the browser window set smaller than my desktop's resolution. I can also show up as using IE when actually using Opera or Firefox.

That being said the blur filter adds a blurring effect to an image having it appear out-of-focus. This filter uses parameters.

How to style Normal to Blur image links

Here I will share a slight direction of only 50 degrees and mid-range strength of 5.

On a stylesheet:
a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img {filter: blur(add=0, direction=50, strength=5);}

In the HEAD:
<style type="text/css">
a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img {filter: blur(add=0, direction=50, strength=5);}
</style>

Appearance on the Web when hovering, or mousing over, an image link:

Blur Filter Demonstration Image

How to style Blur to Normal image links

Here I will share a sharper angle, of 175 degrees, with full strength factor of 10 as a comparison since the previous example used lower values.

On a stylesheet:
a:link img {filter: blur(add=0, direction=175, strength=10);}
a:visited img {filter: blur(add=0, direction=175, strength=10);}
a:hover img {filter:none;}

In the HEAD, for all images in a page:
<style type="text/css">
a:link img {filter: blur(add=0, direction=225, strength=10);}
a:visited img {filter: blur(add=0, direction=225, strength=10);}
a:hover img {filter:none;}
</style>

Appearance on the Web when hovering, or mousing over, an image link:

Blur Demonstration #2 Image

Example styling for Normal to Blur image links with ADD parameter increase

Here I will share a slight direction of only 50 degrees and mid-range strength of 5 as like with the first example. This time I will take the ADD parameter from 0 to 1.

On a stylesheet:
a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img {filter: blur(add=1, direction=50, strength=5);}

In the HEAD:
<style type="text/css">
a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img {filter: blur(add=1, direction=50, strength=5);}
</style>

Appearance on the Web when hovering, or mousing over, an image link:

Blur Filter Demonstration #3 Image

Related Articles:


straight to the top