Background image for anchor link and css transparent in IE8

Question

HTML code

<div class="thumbnail-wrapper">
    <a tabindex="-1" class="thumbnail select" style="background-image: url(http://localhost/RP/assets/images/hero/01.jpg); width: 157px; height: 87px;" data-index="0">
        <div class="caption" style="bottom: 0px;">Sport's live FA Cup games revealed</div>
    </a>
    <span class="pointer" style="display: inline;"></span>
    <a tabindex="-1" class="gal-type"></a>
</div>

IE CSS

.thumbnail-wrapper .thumbnail.select {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    filter: alpha(opacity=70);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    zoom:1;
    display: inline-block;
    position:absolute ; // this is not needed but I gave at least this could help
}

I have given several filter properties, But no luck.

http://stackoverflow.com/questions/1948176/opacity-css-not-working-in-ie8 — Nico O, Mar 14 '14 at 13:09
I think you have a problem with the order of your definitions. You override your own filter. Try to exactly copy one of the answers with high score. — Nico O, Mar 14 '14 at 13:13
`-ms-filter` should not be after `filter`, always put browser specific before standards. — wf4, Mar 14 '14 at 13:15

score 1 · Answer 1 · answered Mar 14 '14 at 13:31

Add image overlay inside the anchore link. Something like this

HTML code

<div class="thumbnail-wrapper">
    <a tabindex="-1" class="thumbnail select" style="width: 157px; height: 87px;" data-index="0">
        <div class="overlay"></div>
        <div class="caption" style="bottom: 0px;">Sport's live FA Cup games revealed</div>
    </a>
    <span class="pointer" style="display: inline;"></span>
    <a tabindex="-1" class="gal-type"></a>
</div>

IE CSS

.thumbnail-wrapper .thumbnail.select {
    display: inline-block;
    position:relative;
}

.thumbnail-wrapper .thumbnail.select .overlay {
    background : url(http://localhost/RP/assets/images/hero/01.jpg);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    filter: alpha(opacity=70);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    position:absolute;
    top:0;
    left:0;
    width:157px;
    height:87px;
}

score 0 · Answer 2 · answered Mar 14 '14 at 13:39

0

target styling only for IE using asterisk * before any attribute.

*filter: alpha(opacity=70);

So that the attribute doesn't conflict with other attributes.

answered Mar 14 '14 at 13:39

Chintan Bhatt

257
1
3
9

Background image for anchor link and css transparent in IE8

2 Answers2