Description: IE 4 and above support cool visual controls called filters, which are built-in multimedia effects you can instantly apply to your page images (among other elements). There are 15 filters in all, everything from making an image wavy to giving it a glow. And since these controls are all enabled through CSS, browsers that don't support them simply ignore em'.

To allow you to easily sample all of the 15 filters and pick out the one or combination you want to use, Terence has created the following filter sampler. Use the links at the bottom to select one or more filters, and the effect on the butterfly will be shown in the mini window above it. Click again would disable the selected filter. Every filter has its own setting, you can set the parameters to change the setting. If the filter is already enabled, you have to disable it and enable again. Also, you can drag the image to impress the power of CSS filter functions. When you see one you like to use, click "I want this!", and copy the code under "Directions".

Demo and instructions: Click on a combination of the filter links below to see the desired effect applied to the butterfly. Clicking on it again will disable the effect in question. You can drag the image to see how image overlapping affects things:

Choose Filter 1) alpha (finishopacity:   finishX:   finishY:   opacity:   startX:   startY:   style: 0 1 2 3 ) 2) blur (add: 0 1   direction: 0 45 90 135 180 225 270 315   strength: ) 3) chroma (color: #) 4) dropShadow (color: # offX: offY: positive: 0 1 ) 5) flipH 6) flipV 7) glow (color: #   strength: ) 8) gray 9) invert 10) light 11) mask (color: #) 12) redirect(No effect) 13) wave (add : 0 1   freq: )  lightStrength: )  phase:   strength: ) 14) xray

Moment of truth:
Simply insert the below inside the <img> tag in question AFTER you've chosen the desired effects above and clicked on the form button "I want this":

Select All

For example, <img src="test.gif" style="filter:light()">