how to handle 'double opacity' of two overlapping divs

Question

I have two divs, both with 0.6 opacity. I need them to overlap but retain their opacity and not create a new combined opacity level. I can\'t use an image.

EDIT -- The

Answer 1

I have created a Q/A to handle this scenario along with the 'hover' of such overlapped elements.

Overlapped elements with opacity and handling the 'hover' on those.

The solution is basically to set the opacity in the parent level instead directly on the children elements and to toggle those while hover, with JS.

---

HTML

---

JS

$(".first, .second").hover(function() {
  $(".wrapper, .first, .second").not(this).toggleClass("add-opacity");
});

CODEPEN

Hope this helps.