https://jsfiddle.net/1zj71an3/1/
html:
<div id="one">
aaaaaaaa
</div>
<div id="two">
bbbbbbbb
</div>
css:
#one{
background-color:yellow;
width:300px;
height:300px;
opacity: 0.5;
}
#two{
background-color:blue;
width:200px;
height:200px;
margin-top: -100px;
}
I am encountering an issue where setting the opacity of the larger div affects the smaller overlapping div as well. I want to keep the opacity of the smaller div at 1 while applying opacity of 0.5 to the bigger one. How can I achieve this using CSS?
Any suggestions or solutions would be greatly appreciated!