How do i make the opacity of the parents div not to affect the child vice versa

Answer 1

The opacity of the child will always be the opacity of the parent but you can avoid this by using background:rgba()
see this code made for your question ;)
https://code.sololearn.com/W1wQ54y5e3uE/#html

Answer 2

just make sure that opacity background elements don't wrap other elements in it

Answer 3

https://code.sololearn.com/W2fzI2WhflM6/?ref=app