Denis Stephanov Denis Stephanov - 3 months ago 8
CSS Question

On child hover, add background color to container

When the cursor hovers the left div, I need to overlap the whole wrapper, except for left div, with black color with opacity 0.2.

How can I do that in css? Thanks.



<div id="wrapper">
<div id="left">... some elements</div>
<div id="right">... some elements</div>
</div>




Answer

You could do that by applying a very large box-shadow which is black and has 0.2 opacity by using rgba() color.

The container (#wrapper) must have overflow: hidden to hide excess shadow.

#wrapper {
  border:1px solid red;
  padding: 1em;
  overflow: hidden;
}

#wrapper > div {
  border: 1px solid blue;
}

#left:hover {
  box-shadow: 0 0 10em 10em rgba(0,0,0,0.2);
}
<div id="wrapper">
    <div id="left"> ... some elements </div>
    <div id="right"> ... some elements </div>
</div>

jsFiddle: https://jsfiddle.net/azizn/sfq252g5/