How to apply opactity to parent class

[newcoder1010]

Hello,

HTML:

<section id="block-situations">
<h2 class="block-title">Need to Sell Your House</h2>
<div class="field field--name-body">
<div class="padd"> 
<ul class="eclipse-list"><li>Single family house</li>
  <li>Mult-units</li>
  <li>Town homes</li>
</ul>
</div>
</div>
</section>

CSS:

#block-situations {
    background-image: url(home-for-cash.png);
    background-repeat: no-repeat;
    background-size: cover;
    opacity: .5;
}

 

I like to apply opacity to #block-situations only. It works. But the problem is that eclipse.list class contents grayed out. That means once I have the opacity, .eclipse-list contents are not clear. How to apply opacity to parent class without affecting the eclipse-list class contents?

Thanks!

 

[dsonesuk]

When using opacity it affects ALL child elements. Therefore you need to apply to a sibling of those child elements that will fill the whole parent using positioning like absolute, and use z-index to force it behind other sibling elements.

[newcoder1010]

Thanks for your reply but it is confusing. If you could help me with some coding, it will be great. 

[dsonesuk]

https://www.w3schools.com/code/tryit.asp?filename=G0V6RXVDG3PU

[newcoder1010]

Thank you! I will play with that tonight.