Wednesday, August 28, 2013

Opacity and pseudo elements and IE8

Tried something like this to implement semi-transparency to an element:

.faded:after {
    content: " ";
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:2;
    background:#fff;  
    zoom:1;
    -ms-filter: "alpha(opacity=30)";
    opacity:0.3;
    }

Well.  Turns out a filter gradient doesn't work for pseudo elements on IE8.

It works if you apply the filter directly to the element:
(had to include the img elements within the faded container; for some reason, IE8 doesn't apply the filter to them)

.faded, .faded img {
    position:relative;
    display:block;
    -ms-filter: "alpha(opacity=30)";
    opacity:0.3;
    }



No comments:

Post a Comment