-1

In this example here im trying to make the parent to be more transparent without changing the opacity of the child.

<div>
<div className="larger-box">
  <div className = "smaller-box">
 </div>
</div>

here is my current css styling:

  .larger-box{
  width: 10rem;
  height: 10rem;
  background-color: red;
}
 .smaller-box{
  width: 2rem;
  height: 2rem;
  background-color: green;
  opacity: 1 !important;
}

Is there a possible way to do that in css?

Nikola Lazarov
  • 3
  • 4

2 Answers2

-1

The child will always be affected by the parents opacity, and so the easiest way to give each a different opacity - is to make them siblings and position the second one absolutely over top of the first - thus allowing each to have its own opacity. Note the position: relative of the parent wrapper div.

Here - i have some text that is showing behind the red div and the green div is sitting over top as if it was a child - but is in fact a sibling and is therefore unaffected by the red div's opacity.So the text shows through the red div - but not through the green div.

.wrapper{
  width: 10rem;
 height: 10rem;
 position: relative;
}

p { padding: 8px}

 .larger-box{
   position: absolute;
  top: 0;
  left:0;
  width: 10rem;
  height: 10rem;
  background-color: red;
  opacity: 0.3
}
 .smaller-box{
  width: 2rem;
  height: 2rem;
  background-color: green;
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="wrapper">
   <p>Lorem ipsum dolor sit amet. Sit dicta tempore id quas delectus estitier at voluptatem voluptas sit culpa iste ea voluptatum vero!</p>
  <div class="larger-box"></div>
  <div class = "smaller-box"></div>
</div>
gavgrif
  • 15,194
  • 2
  • 25
  • 27
-1

you can use CSS's not. Via:

.larger-box:not(.smaller-box) {
  width: 10rem;
  height: 10rem;
  background-color: red;
}

.smaller-box {
  width: 2rem;
  height: 2rem;
  background-color: green;
}
Telephone Line
  • 1