Comments on: CSS Image Filters in Internet Explorer

By: Dan

Dan — Thu, 02 Apr 2009 01:04:00 +0000

The only way I know of doing it so it works cross-browser is to use 2 separate images and do a rollover, which of course can be done using pure CSS with no javascript (in case user has scripting disabled). Example:

div#01 //set an id for the div
{
height: XXpx; //where XX is your actual dimension
width: XXpx; //ditto
background-image: url(‘image_a.jpg’);
display: block;
}

div#01:hover
{
background-image: url(‘image_b.jpg);
}

.hide //define a class for image preload
{
display: none;
}

In your HTML:

I’ve tried this in IE, Firefox, abd Safari and it works in all 3

By: Eric Wendelin

Eric Wendelin — Fri, 28 Mar 2008 00:55:58 +0000

@pfwd:

So I think that FF3 was going to have a similar feature called image filters but it got pulled. Maybe FF4?

By: pfwd

pfwd — Wed, 26 Mar 2008 22:52:26 +0000

Nice, Just wish IE would support more common image styles like Tony mentioned instead of making their own ones up.
However saying that IE8 is getting better in CSS support than IE7/6.
Does anyone know of a way of doing this in FF i wonder?

By: Eric Wendelin

Eric Wendelin — Wed, 26 Mar 2008 20:38:59 +0000

These are interesting. Don’t forget about DropShadow(color,offX,offY)! Note that this will prevent your CSS from validating but neat effects.

By: Rob

Rob — Wed, 26 Mar 2008 20:37:58 +0000

Cute, but IE can’t do much of anything else right, so why bother? With every other browser near passing Acid3, while IE8 still struggles with basic properties, you should make an article about the multitude of standard things that can be done on every other browser but doesn’t work on IE.

By: Tony

Tony — Wed, 26 Mar 2008 18:30:32 +0000

I like the effects, gives you more management to the images which are one of the type of contents that are not available to manipulate in css (including objects{videos, animations…}).

Sad that IE can give you manipulation in this, but it doesn’t get better in supporting more transparency in png images.