Opacity not working on img in IE8

Question

I have code that works in Chrome and Firefox, but not in IE8.

    <a href="javascript:void();" class="shareActionLink" id="comment">
<img src="comment.gif" class="shareActionImage" />Comment
</a>

The CSS for this is:

    .shareActionLink:link, .shareActionLink:visited
{   
    margin-right:8px;
    color:#999;
    opacity:0.6;
    filter: alpha(opacity=60);  /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=60)"; /*IE8*/
    background-color: #fff;
}
#shareActionsBox .shareActionLink:hover
{
    color:#333;
    text-decoration:none;
    opacity:1.0;
    filter: alpha(opacity=100);  /* internet explorer */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /*IE8*/
}

Based on other StackOverflow posts, I added the IE filters, which helped to adjust the text opacity, however, the image opacity still doesn't change in IE. It works fine in other browsers.

I suspect that this is happening because the img is nested within the link. How do I get the image to change opacity in IE??

Thanks

just for the sake of try-out can you try giving the parent of your `a` tag (probably a `div` or so) a `background-color: Blue` (or any other colour) and see if the filter then works? I remember having a similar issue that was solved this way. Or perhaps a background-color for the `a` tag itself. — Bazzz, Mar 21 '11 at 12:40
@Bazzz: I have added background colors previously before posting this. It was necessary because Firefox made the text a little funny when you added the opacity setting and adding a background made the text display correctly. However, that was not the fix for this particular problem. — Paolo Broccardo, Mar 21 '11 at 15:13

score 5 · Accepted Answer · answered Mar 21 '11 at 13:41

MS filters only work in IE7 if the hasLayout property is set to true, they only work in IE8 on block elements, or if you set the display property to block or inline-block.. as you're trying to use this on an inline element, the a, then setting display: inline-block; should solve it for all IE's as it works to set hasLayout for IE7 and also keeps IE8 happy

.shareActionLink {
    display: inline-block; /* IE needs but shouldn't hurt anyone else */
}
.shareActionLink:link, .shareActionLink:visited {   
    margin-right:8px;
    background: #fff;
    color:#999;
    opacity:0.6;
    filter: alpha(opacity=60);  /* IE */

}

.shareActionLink:hover {
    color:#333;
    text-decoration:none;
    opacity:1.0;
    filter: alpha(opacity=100);  /* IE */
}

Thanks Claire Suzy Q :) I had tried the display:block previously, but not the display inline-block. It worked like a charm! Ta! — Paolo Broccardo, Mar 21 '11 at 15:14
You're Welcome, glad it helped, was recently working with filters just sharing back what I found — clairesuzy, Mar 23 '11 at 20:11

score 1 · Answer 2 · answered Mar 21 '11 at 12:39

Off the top of my head, setting opacity on a parent element means it's children elements get, erm, opacitied? as well.

To target the image specifically, add img after each of the css selectors; e.g.:

#shareActionsBox .shareActionLink:hover img

to target the image whenever the parent link is something (in this case when hovered).

score 0 · Answer 3 · edited May 23 '17 at 11:52

I could not get this to work in IE6 without targeting the <img> element. I've not got IE8 installed so cannot be sure this demo will work in that browser. However, it does work in IE6, Chrome11 and Firefox4.

Also, it is worth noting that if your comment.gif has transparency then you may have further problems with the transparent part unless you set a background-color or use JavaScript to handle the hover. See another answer I wrote on this.

Opacity not working on img in IE8

3 Answers3

Linked