child div not to inherit parent opacity

Question

<div class="notice_container" id="showMe">
    <div class="notice">some notice!</div>
</div>

JSFiddle here. (click "run" to see the animation)

I need .notice not to inherit its parent CSS opacity. Please note that opacity is assigned with jQuery animate to .notice_container.

$('#showMe').css({
    "opacity": 0,
    "display": "block"
}).animate({
    opacity: .7
}, 1200)

Why does .notice inherit the opacity? If I position it outside of its container it will loose the fade-in effect. I'd like to see the red box completely opaque and the black container lightly transparent: is it possible? And how?

Many thanks.

not working solution - this would solve the inhert problem, but jQuery fails to animate it.

$('#showMe').css({
    backgroundColor: "rgba(0, 0, 0, 0)",
    "display": "block"
}).animate({
    backgroundColor: "rgba(0, 0, 0, 1)"
}, 1200);

See: http://jsfiddle.net/Bbw7r/1/

Possible dupe: http://stackoverflow.com/questions/5770341/i-do-not-want-to-inherit-the-child-opacity-from-the-parent-in-css — Abhitalks, Aug 21 '13 at 15:45
I already saw that question: it is not mentioned the use of jq animations which makes the answer impossible (as far as I know). — Saturnix, Aug 21 '13 at 15:46
jQ animations don't matter here. Try without animation. The problem will still be there. Here is another question: http://stackoverflow.com/questions/2636871/is-opacity-is-inherited-in-a-div — Abhitalks, Aug 21 '13 at 15:47
it DOES matter to find a solution: off course the problem is pure CSS but, in case you didn't notice, the CSS is animated via jQuery which makes all different. — Saturnix, Aug 21 '13 at 15:48
Use `position:absolute` instead of parent-child. It will work. The root cause of the problem is mentioned there in the earlier questions. Hence the links. — Abhitalks, Aug 21 '13 at 15:51
"If I position it outside of its container it will loose the fade-in effect." — Saturnix, Aug 21 '13 at 15:51
@Saturnix Read [the thread that abhitalks linked to](http://stackoverflow.com/questions/5770341/i-do-not-want-to-inherit-the-child-opacity-from-the-parent-in-css). Opacity isn't strictly inherited, but descendants cannot override the opacity set by ancestors. If you want to animate `rgba()` then you'll need the [jQuery UI Color plugin](https://github.com/jquery/jquery-color/): [demo](http://api.jqueryui.com/color-animation). — André Dion, Aug 21 '13 at 15:59
I'm trying to do this with background color and rgba but jquery fails to animate. - The question remains: is it possible to do this? It SHOULD work, according to other questions and the jq specs. — Saturnix, Aug 21 '13 at 16:00
I dealt with similar issue some time ago, here is a useful link that helped me: http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/ — Max Malyk, Aug 21 '13 at 16:06

score 2 · Answer 1 · edited Aug 22 '13 at 06:20

2

I don't think it's possible to not apply opacity of an element to some of its contents. What you could do is duplicate the containing element, something like this:

<div class="notice_container" id="showMe"></div>
<div class="notice_wrapper" id="showMeWrapper">
    <div class="notice">some notice!</div>
</div>

Make #showMe and #showMeWrapper have the same dimensions and same position, but leave showMeWrapper without any styles (transparent background, no borders, etc). Animate only the #showMe element. Animate both if you wish to animate dimension or position changes.

edited Aug 22 '13 at 06:20

Tushar Gupta - curioustushar

58,085
24
103
107

answered Aug 21 '13 at 16:04

Miloš Rašić

2,229
5
24
43

+1 - I think I'll stick with this hacky solution if I find nothing more simple. – Saturnix Aug 21 '13 at 16:17

Abhitalks · Accepted Answer · 2013-08-21T16:28:03.583

1

Here, I made a quick sample based on my original reco of absolute positioning:

http://jsfiddle.net/Bbw7r/5/

Not much complexity for you to work around.

<div class="notice_container handle" id="showMe"></div>
<div class="notice handle">some notice!</div>

$('.handle').show().delay(500).fadeTo('slow', 0.7);

(delay is just to let you see what's happening)

Updated: I missed the queue:

$('.handle').show().animate({opacity: .7}, {queue: false, duration: 1200});
$('.notice').animate({opacity: 1}, {queue: false, duration: 1200});

edited Aug 21 '13 at 16:28

answered Aug 21 '13 at 16:20

Abhitalks

27,721
5
58
81

very cool! Thanks for your help! One question: will it work in IE8? Will it crash IE8 or will it just degradate silently to completelly opaque? If you know it and can tell it, that would be great. Thanks again :) – Saturnix Aug 22 '13 at 07:21

score 0 · Answer 3 · answered Aug 21 '13 at 16:06

opacity property - as in my experience, and as in some information, (like this: http://www.w3schools.com/cssref/css3_pr_opacity.asp) - is ALWAYS inherited.

Just think about it: You want to make some element semi-transparent, and make it's opacity=0.5, and what do you expect to see? It's logically, that all the element would be semi-transparent. Else you would have to make every item inside of it semi-transparent.

So, your example have 2 solutions:

You can set your notice_container to opacity:1 (100% opacity), but set semi-transparent background-color, like this:
```
.notice_container
{
    background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black color */
}
```

Animation of this color could be achieved with jQuery-UI (it allows to animate color property, but I didn't tested it)

I'm using other method: my background and notice blocks are placed at one level, not nested. Like this:

<style>
/* Style for shadow */
.notice_shadow
{
  position:fixed;
  z-index:9000;
  left:0px; right:0px; top:0px; bottom:0px;
  background: black;
  opacity:0.7;
  display:none;
}
/* Style for notice itself */
.notice
{
  position:fixed;
  z-index:9001;
  left:50%; top:50%; /* centering notice in the center of the screen */
  width:200px;
  height:100px;
  margin-left:-100px; /* the second part of parameters used for centering*/
  margin-top:-50px;
  background: red;
  color:white;
  display:none;
}
</style>
<script>
$(function(){
   $('.notice').fadeIn(1000);
   $('.notice_shadow').fadeIn(1000);
});
</script>
<div class='notice_shadow'></div>
<div class='notice'>Hello, this is a notice!</div>

Try it, maybe i'll be more simple.

And, by the way, if you triyng to make simple "modal" notices - there ale a lot of realisations ready to use, for example https://github.com/samdark/the-modal (not my own, just a good one)

child div not to inherit parent opacity

3 Answers3