/CSS/Affect top div opacity without affecting childrne

Affect top div opacity without affecting childrne

#container {
    border: solid gold 1px;   
    width: 400px;
    height: 200px;
    background:rgba(56,255,255,0.1);
}

#box {
    border: solid silver 1px;
    margin: 10px;
    width: 300px;
    height: 100px;
    background:rgba(205,206,255,0.1);
  	transition: 2s background;
}

// if you then want to apply an animation, do it on background-color instead of opacity

Source: stackoverflow.com

Similar codes

8 votes266 views1 answer
How to align items in css
CSS
8 votes276 views2 answers
Css multiple selectors
CSS
0 vote286 views1 answer
Hover on father elemet activates a child element css
CSS
-1 vote268 views1 answer
Css grid column height fit content
CSS
1 vote242 views1 answer
A open new tab css
CSS
1 vote277 views2 answers
How to set thickness of hr in html
CSS
1 vote292 views1 answer
Overflow scrollbar with variable height
CSS
64 votes274 views6 answers
Media queries
CSS
1 vote295 views2 answers
Css clearfix for floats with display table and clear both
CSS
7 votes260 views1 answer
Show hand icon on hover javascript
CSS