Apply opacity without effecting the child elements

Question

I have a div that has a background image, and when It got hovered, the div will be given opacity 0.7

<div>
  <span>text</span>
</div>

Secondly I've a span that when I got hovered, I use show() to overwrite its default css display:none.

The problem is the opacity applies to the span as well, so the text doesn't stand out as I expect. I tried to set span to opacity 1 on the hover event, no luck with that.

possible duplicate of [Set opacity of background image without affecting child elements](http://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements) — Praveen, Oct 12 '13 at 14:41

Gabriel Petrovay · Accepted Answer · 2013-10-12T14:44:55.123

The opacity will affect all children of an element. You can achieve what you want by using two parallel divs, one for the background image with opacity and the other with the span and the rest of the content. The absolute positioning of bg-img will not affect the position of content and will appear behind this. You also want to adjust the positioning and size of bg-img using top, bottom, right, left, width or height

HTML:

<div>
    <div class="bg-img"></div>
    <div class="content">
        <span>text</span>
    </div>
</div>

CSS:

.bg-img {
    position: absolute;
}
.bg-img:hover {
    opacity: 0.7;
}

Ates Goral · Answer 2 · 2013-10-12T14:50:19.797

If the background color behind the image is known, you can apply an opaque background color to the <span> to make the background image look faded.

http://jsfiddle.net/TxQny/

HTML:

<div class="bg">
    <span class="overlay">text</span>
</div>

CSS:

.bg {
    background-color: #e0e0e0; /* You can use an image instead */
}
.overlay {
    display: block;
}
.overlay:hover {
    background-color: rgba(0, 255, 255, 0.3);
}

Of course, this assumes that all the browsers you care about supporting support RGBA.

Apply opacity without effecting the child elements

2 Answers2