Web Site Primer

HTML · Web Design · Color Charts · & More!

CSS Styling: Image X-Ray Filter ;

Originally Published: 2007-01-31
Updated:
This article delves into how to share the CSS styling for creating an x-ray filter effect on 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 X-Ray 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 X-Ray filter takes an image to black-white variation that is similar to what resembles a stereotypical x-ray or film negative appearance. It is one of the few straight forward filters as it does not use parameters.

How to style Color to X-Ray image links

On a stylesheet:
a:link img {filter:none;}
a:visited img {filter:none;}
a:hover img {filter:xray();}

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

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

XRay Demonstration Image

How to style X-Ray to Color image links

On a stylesheet:
a:link img {filter:xray();}
a:visited img {filter:xray();}
a:hover img {filter:none;}

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

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

XRay Demonstration #2 Image

Related Articles:


straight to the top