how to make div fade/grey. Opacity works but makes it transperant-CodePudding

I have two div connected to each other through svg line(implementation from d3js chart). On certain action, I want to fade/greyout some of the divs. I am able to achieve it by setting opacity 0.5. But it makes the div transparent so background svg line gets visible. I have created a jsfiddle to demo the issue.

<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#777; position:absolute;">
    <div >
    text
  </div>
    <div >
  
  </div>
</div>
<div id="div2" style="width: 100px; height: 100px; top:200px; left:200px; background:#333; position:absolute;">
    <div >
    text
  </div>
    <div >
  
  </div>
</div>

<svg width="300" height="250"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>
<button onclick="fade()">
fade
</button>
<button onclick="reset()">
reset
</button>


function fade () {
 document.getElementById('div1').className = 'greyout';
}

.greyout {
  opacity: 0.5;
}

Thanks!

CodePudding user response：

Okay, so here is a solution that allows you to keep the logic with the opacity, but with a slight change to the structure of html elements.

I have just added a wrapper div around the "cards" (div1 and div2) and moved all inline styles to it except the background property, then gave the wrapper a new background: white; (you can give it any color you like).

The idea is that the outer wrapper doesn't recieve any opacity and stays opaque, but the inner "card" div1 / div2 can recieve the opacity you want without any other elements showing through:

function fade() {
  document.getElementById('div1').className = 'greyout';
}

function reset() {
  document.getElementById('div1').className = 'reset';
}

.greyout {
  opacity: 0.5;
}

.reset {
  opacity: 1;
}

.child1 {
  height: 25px;
  width: 100px;
  background-color: #3690e7;
}

.child2 {
  height: 75px;
  width: 100px;
  background-color: darkgrey;
}

<div style="width: 100px; height: 100px; top:0; left:0; position:absolute; background: white;">
  <div id="div1" style="background:#777;">
    <div >
      text
    </div>
    <div >

    </div>
  </div>
</div>
<div style="width: 100px; height: 100px; top:200px; left:200px; position:absolute; background: white;">
  <div id="div2" style="background:#333;">
    <div >
      text
    </div>
    <div >

    </div>
  </div>
</div>

<svg width="300" height="250"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>
<button onclick="fade()">
  fade
</button>
<button onclick="reset()">
  reset
</button>

CodePudding user response：

You can use:

.greyout {
  filter: grayscale(70%);
}

Or another percentage depending on you taste.