Image filters for IE

CSS Coding Tutorials | Submited Nov 17, 2007

Written by: John

This is one of the most commonly asked questions for how to change the look of some images / text on your page. The following codes ONLY WORK IN Internet Explorer. I have an example of how each code would look right above the code, so you can kinda get an understanding there.The first image below is what it looks like normally without anything applied to it.

Alpha Filters, side transparency

Apply it to just one image[/color
<img src="http://url.to/pic.gif" style="filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=50, FinishX=200, FinishY=0);">

[color=#0af]All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=50, FinishX=200, FinishY=0);}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=50, FinishX=200, FinishY=0);}

All images, the following goes between your Style Tags
img {filter:alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=50, FinishX=200, FinishY=0);}

Alpha Filters, circle transparentcy

Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=50, FinishX=200, FinishY=0);">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=50, FinishX=200, FinishY=0);}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=50, FinishX=200, FinishY=0);}

All images, the following goes between your Style Tags
img {filter:alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=50, FinishX=200, FinishY=0);}

Alpha Filters, square transparentcy

Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:alpha(Opacity=100, FinishOpacity=0, Style=3, StartX=0, StartY=50, FinishX=200, FinishY=0);">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:alpha(Opacity=100, FinishOpacity=0, Style=3, StartX=0, StartY=50, FinishX=200, FinishY=0);}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:alpha(Opacity=100, FinishOpacity=0, Style=3, StartX=0, StartY=50, FinishX=200, FinishY=0);}
All images, the following goes between your Style Tags
img {filter:alpha(Opacity=100, FinishOpacity=0, Style=3, StartX=0, StartY=50, FinishX=200, FinishY=0);}

Blur Filters

the direction=number below in the code goes by the following chart..

0 = top
45 = top right
90 = right
135 = bottom right
180 = bottom
225 = bottom left
270 = left
315 = top left

The strength=number below is how disorted it will look. Make the number higher to have more pixels.

Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:blur(add=0, direction=200, strength=5);">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:blur(add=0, direction=200, strength=5);}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:blur(add=0, direction=200, strength=5)}

All images, the following goes between your Style Tags
img {filter:blur(add=0, direction=200, strength=5);}

FlipV Filters

Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:flipv;">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:flipv;}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:flipv);}

All images, the following goes between your Style Tags
img {filter:flipv;}

FlipH Filters

Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:fliph;">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:fliph;}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:fliph);}

All images, the following goes between your Style Tags
img {filter:fliph;}

XRay Filters

Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:xray;">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:xray;}

All linked images when overed on, the following goes between your Style Tags
>a:hover img {filter:xray);}

All images, the following goes between your Style Tags
img {filter:xray;}

Invert Filters

Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:invert;">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:invert;}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:invert);}

All images, the following goes between your Style Tags
img {filter:invert;}

Grayscale Filters

Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:gray;">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:gray;}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:gray;}

All images, the following goes between your Style Tags
img {filter:gray;}

Wave Filters

Apply it to just one image
<img src="http://url.to/pic.gif" style="filter: wave(add=0, freq=1, lightstrength=20, phase=100, strength=10);">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:wave(add=0, freq=1, lightstrength=20, phase=100, strength=10);}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter: wave(add=0, freq=1, lightstrength=20, phase=100, strength=10);}

All images, the following goes between your Style Tags
img {filter: wave(add=0, freq=1, lightstrength=20, phase=100, strength=10);}

Chroma Filters

The chroma filter allows you to make a color of the image transparent. If you're using the code on myspace, then it may or may not work because of myspace filtering the # sign. If you are using it for myspace, take out that sign before trying it. For the color=#E666D5 you'll have to change the HEX value there to the color you would like to be transparent within that image.</p>

Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:chroma(color=#E666D5);">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:chroma(color=#E666D5);}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:chroma(color=#E666D5);}

All images, the following goes between your Style Tags
img {filter:chroma(color=#E666D5);}

DropShadow Filters

In the above image I applied a chroma filter, and a drop shadow filter because for the drop shadow filter to work correctly, the image needs to be transparent in some aspects. The exact code I used in the image above looks like so.. filter: chroma(color=#E666D5) dropshadow(color=#00FF00, offx=10, offy=10);

Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:dropshadow(color=#00FF00, offx=5, offy=5);">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:dropshadow(color=#00FF00, offx=5, offy=5);}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:dropshadow(color=#00FF00, offx=5, offy=5);}

All images, the following goes between your Style Tags
img {filter:dropshadow(color=#00FF00, offx=5, offy=5);}

Shadow Filters

In the above image I applied a chroma filter, and a shadow filter because for the shadow filter to work correctly, the image needs to be transparent in some aspects. The exact code I used in the image above looks like so.. filter: chroma(color=#E666D5) shadow(color=#9BAD71, direction=225);

Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:shadow(color=#9BAD71, direction=225);">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:shadow(color=#9BAD71, direction=225);}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:shadow(color=#9BAD71, direction=225);}
All images, the following goes between your Style Tags
img {filter:shadow(color=#9BAD71, direction=225);}

Glow Filters

In the above image I applied a chroma filter, and a glow filter because for the glow filter to work correctly, the image needs to be transparent in some aspects. The exact code I used in the image above looks like so.. filter: chroma(color=#E666D5) glow(color=#6E9DD4, strength=7);

Apply it to just one image
<img src="http://url.to/pic.gif" style="filter:glow(color=#6E9DD4, strength=7);">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter:glow(color=#6E9DD4, strength=7);}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter:glow(color=#6E9DD4, strength=7);}
All images, the following goes between your Style Tags
img {filter:glow(color=#6E9DD4, strength=7);}

Mask Filters

In the above image I applied a chroma filter, and a mask filter because for the mask filter to work correctly, the image needs to be transparent in some aspects. The exact code I used in the image above looks like so.. filter: chroma(color=#E666D5) mask(color=#E666D5);

Apply it to just one image
<img src="http://url.to/pic.gif" style="filter: mask(color=#E666D5);">

All linked images, the following goes between your Style Tags
a:link img, a:visited img, a:active img {filter: mask(color=#E666D5);}

All linked images when overed on, the following goes between your Style Tags
a:hover img {filter: mask(color=#E666D5);}

All images, the following goes between your Style Tags
img {filter: mask(color=#E666D5);}