Web Site Primer

HTML · Web Design · Color Charts · & More!

CSS Styling: Image Transparent (Alpha) Filter ;

Originally Published: 2007-01-31
Updated:
This article delves into how to share the CSS styling for creating transparency filter effect for 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 Alpha 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 Alpha, or transparent, filter can have an image appear to disappear or fade into the background. This filter makes use of the OPACITY parameter with values of 0 (none) to 100 (default, full) and is where you set the level, or value, of 'visibility'.

How to style Normal to Transparent image links

In this example, I set the OPACITY parameter of ALPHA to 30 or lower mid-range value.

On a stylesheet:
a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img {filter:alpha(opacity=30);}

In the HEAD:
<style type="text/css">
a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img {filter:alpha(opacity=30);}
</style>

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

Alpha Filter Demonstration Image

How to style Transparent to Normal image links

In this example, I set the OPACITY value of ALPHA at 70.

On a stylesheet:
a:link img {filter:alpha(opacity=70);}
a:visited img {filter:alpha(opacity=70);}
a:hover img {filter:none;}

In the HEAD, for all images in a page:
<style type="text/css">
a:link img {filter:alpha(opacity=70);}
a:visited img {filter:alpha(opacity=70);}
a:hover img {filter:none;}
</style>

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

Alpha Demonstration #2 Image

Related Articles:


straight to the top