SASS Opacity Mixin

#css

#ie

#mixin

#opacity

#sass

CSS Opacity SASS MIxin For IE, FireFox, Chrome and Safari

@mixin Opacity($value){
  $IEValue: $value*100;
  opacity: $value;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$IEValue+")";
  filter: alpha(opacity=$IEValue);
}

How To Use

img.preload{
    @include Opacity(0);

    &.complete{
        @include Opacity(1);
    }
}

Written by Shavit

Say Thanks

Respond

Related protips

Fully custom select box, simple css only

566.5K

Change the Bootstrap NavBar Breakpoint

497.5K

Creating full width (100% ) container inside fixed width container.

451.8K

3 Responses

Add your response

chrishough

Well done, thank you

over 1 year ago ·

mathijsdelva

Good job on this. I was making my own but was thinking i'd better check up on some other alternatives.

over 1 year ago ·

henrik

Thanks!

I changed the casing to fit our conventions, maybe suits someone else:

@mixin opacity($value){
  $ie-value: $value * 100;
  opacity: $value;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$ie-value+")";
  filter: alpha(opacity=$ie-value);
}

over 1 year ago ·