Denis Stephanov Denis Stephanov - 1 year ago 37
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>

Answer Source

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>