CSS Image Filters in Internet Explorer

Discussion

1. Tony

   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.
2. Rob

   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.
3. Eric Wendelin

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

   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?
5. Eric Wendelin

   @pfwd:

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

   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:

   <img src="image_b.jpg" class="hide"> <!-- This preloads the rollover image -->
   <div id="01"></div>
   

   I’ve tried this in IE, Firefox, and Safari and it works in all 3
7. LookingForCheapSSD

   After 3 years, using IE10, can’t see the flipped images any more. Good to see how MSFT is embracing standards. It would be nice if W3C would have choose these CSS bits as standard. So older websites won’t have to make a change. For the people who bash IE for DX filters, they must know that IE team included these features when nobody was interested in web (back in ’97). Guess they deserve some credit..
8. thomas

   sadly… all those effects don’t work in IE11 (Windows 7)
   and it seems there are no ways to have blur effect always in IE11…
• David Walsh

  You probably want this: https://davidwalsh.name/css-filters
9. William

   What versions of IE are you talking about in this article? I tried this in IE 11 and I didn’t get any effects. I did some googling, does this only work on IE 9 or below?
• David Walsh

  You probably want this: https://davidwalsh.name/css-filters
10. John

    Sorry, but NOTHING of this works in my IE11 on Windows 7. All images look unchanged. You guys do really see effects in IE? (not Edge) What’s wrong on my side?