reduce opacity for body but not image in body

Question

I am trying to reduce the opacity for the background colour of the body of the the document, but keep the background color of the element with id scene at full opacity.

Currently, the opacity in the entire document is reducing to 0.5.

$(".artist").hover(function() {
  $("body").stop().animate({
    "opacity": 0.5
  });
}, function() {
  $("body").stop().animate({
    "opacity": 1
  });
});

body {
  background: yellow;
}
#scene {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="scene">
  <div class="artist">Test me</div>
</div>

Answer 1

You can't really do that because whatever is inside body is a child of it, and decreasing its opacity will decrease the opacity of the children. You could use pseudo-elements like body:after {} and set a background there.

But the easiest approach is to use rgba for the background color:

body {
    background-color:rgba(0,0,0,0.5);
}

That will yield a 50% black color.

Answer 2

To do this with jQuery you need to also use jQuery UI to animate the background color. Then instead of changing to opacity (which affects child elements) you can target the background color using rgba like this:

$(".artist").hover(function() {
  $("body").stop().animate({
    backgroundColor: "rgba(230,230,230,0.0)"
  });
}, function() {
  $("body").stop().animate({
    backgroundColor: "rgba(230,230,230,1)"
  });
});

$(".artist").hover(function() {
  $("body").stop().animate({
    backgroundColor: "rgba(230,230,230,0.0)"
  });
}, function() {
  $("body").stop().animate({
    backgroundColor: "rgba(230,230,230,1)"
  });
});

body {
  background: #e6e6e6;
}
#scene {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="scene">
  <div class="artist">Test me</div>
</div>