Opacity Layered Backgrounds

by kpowz

HTML

<div>
    
hello   
   <div>
       hello mellow
    </div>
    
</div>
</br>
<div id="ownself">
       hello mellow
</div>

CSS

div{
    background: rgba(220, 238, 255, .3);
}

div div {
     background: rgba(255, 255, 204, .3);
    /*background: rgba(225, 225, 122, .3);*/
}

div:hover {
    background: rgba(220, 238, 255, .6);
}

div div:hover {
     background: rgba(255, 255, 204, .6);
    /*background: rgba(225, 225, 122, .3);*/
}


#ownself{
   background: rgba(255, 255, 204, .3); 
}

#ownself:hover{
   background: rgba(255, 255, 204, .6); 
}