Opacity Control Over other Items Inside the container

Question

I find myself having problems in controlling the opacity of my items inside my container. The container should be the only one that is transparent but unfortunately all the items inside my container began to go transparent even though I already establish opacity: 1; to them.

Here is my code...

HTML

    <!DOCTYPE html>
<html>
<head>
    <title>Dino-Jump</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
</head>
<body class = "bg">
<div id = container>
<img src="Pics/user.jpg" id = "user">
<form action = "action-login">
    <div id = "login-box">
        <h1 class = "label1">Login</h1>
        <div class = "textbox">
        <i class = "fa fa-user" aria-hidden = "true"></i>
        <input type="text" name="uname" placeholder="Username" required = "true">
        </div>
        <div class = "textbox">
        <i class = "fa fa-lock" aria-hidden = "true"></i>
        <input type="password" name="pword" placeholder="Password" required = "true">
        </div>

        <input class = "btn" type = "button" name = "login" value = "Login">
        <a id = "forget" href=""> Forget Password </a>
        <a id = "reg" href=""> Register </a>
</form>
</div>
</div>
    <img src="Pics/title.png" id="game-title">

    <div class = "footer">
        <p>&#169; Copyrights Dino-Jump ZRH.Group 10.20.20.18.2.37</p>
    </div>
    </body>
</html>

CSS

    /**Style**/
@import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
@media screen and (min-width:768){
    .bg{
        width: 100%;
        margin: 0 auto;
        padding: 0 auto;
        display: block;
        font-family: sans-serif;
        background-image: url("Pics/bg.jpg");
        background-repeat: no-repeat;
        background-size: 100%;
    }
    img{
        width: 100%;
    }
}

/**bofy**/
.bg{
     margin: 0 auto;
     padding: 0 auto;
     font-family: sans-serif;
     background-image: url("Pics/bg03.jpg");
     background-repeat: no-repeat;
     background-size: 100%;
}
#user{

    opacity: 1;
    background-image: url("Pics/user.jpg");
    width: 135px;
    height: 135px;
    margin: 0 auto;
    padding: 0 auto;
    border-radius: 50%;
    border: 4px solid #ffbd04;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
#container{
    opacity: 0.5;
    margin: 0 auto;
    padding: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 380px;
    height: 480px;
    background: #000;
    border: 4px solid #ffbd04;
    border-radius: 20px;
}
#login-box{
    opacity: 1;
    width: 280px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fff;
}
#login-box h1{
    float: left;
    font-size: 40px;
    border-bottom: 4px solid #ffbd04;
    margin-bottom: 50px;
    padding: 13px 0;
}
.textbox{
    width: 100%;
    overflow: hidden;
    font-size: 20px;
    padding: 8px 0;
    margin: 8px 0;
    border-bottom: 1px solid #ffbd04;
}
.texbox i{
    width: 26px;
    float: left;
    text-align: center;
}
.textbox input{
    border: none;
    outline: none;
    background: none;
    color: #fff;
    font-size: 18px;
    width: 80%;
    float: left;
    margin: 0 10px;
}
::placeholder {
    color: #fff;
}
[placeholder]:focus::-webkit-input-placeholder {
  transition: text-indent 0.3s 0.3s ease; 
  text-indent: -100%;
  opacity: 1;
}
.btn{
    width: 100%;
    background: none;
    border: 2px solid #ffbd04;
    border-radius: 10px;
    color: #fff;
    padding: 5px;
    font-size: 18px;
    margin: 12px;
    transition: .6s;
    overflow: hidden;
}
.btn:focus{
    outline: none;
}
.btn:before{
    content: '';
    display: block;
    position: absolute;
    background: rgba(255,255,255,.5);
    opacity: 0.5;
    filter: blur(30px);
    transform: translateX(-130px) skewX(-15deg);
}
.btn:after{
    content: '';
    display: block;
    position: absolute;
    background: rgba(255,255,255,.5);
    opacity: 0;
    filter: blur(30px);
    transform: translate(-100px) scaleX(-15deg);

}
.btn:hover{
    background: #ffbd04;
    cursor: pointer;
}
.btn:hover:before{
    transform: translateX(300px) skewX(-15deg);
    opacity: 0.6;
    transition: 0.7s;
}
.btn:hover:after{
    transform: translateX(300px) skewX(-15deg);
    opacity: 1;
    transition: 0.7s;
}
/**Footer**/
.footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #000;
    color: #fff;
    text-align: left;
    font-size: 8px;
}
#game-title{
    width: 130px;
    height: 40px;
    position: absolute;
    top: 91%;
    left: 50%;
    transform: translate(-50%,-50%);
}
#forget{
    text-decoration: none;
    position: absolute;
    top: 110%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffbd04;
    font-size: 12px;
    font-family: sans-serif;
}
#reg{
    text-decoration: none;
    position: absolute;
    top: 110%;
    left: 50%;
    transform: translate(-50%, -190%);
    color: #ffbd04;
    font-size: 12px;
    font-family: sans-serif;
}

Sorry long post and thank you in advance.

score 0 · Answer 1 · answered Oct 21 '18 at 05:22

0

You have given opacity:0.5 to container class and opacity:1 to child class. Instead of setting opacity to parent class use background color in rgba format to container class and remove opacity

background: rgba(0, 0, 0, 0.5);

If you use opacity to parent class then child class does not have effect even if you set high opacity to child.

answered Oct 21 '18 at 05:22

Vikas Jadhav

4,597
2
19
37

Oh I see i will try this as well thank you for the response – Rolenz Pangan Oct 21 '18 at 09:18

score 0 · Answer 2 · answered Oct 21 '18 at 05:31

0

I was able to get some result by using the !important keyword.

#login-box{
opacity: 1 !important;
width: 280px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #fff !important;

}

You can't see the text, but you might able to get what you want from there.

answered Oct 21 '18 at 05:31

Jonah Mann

23
5

Ok thank you so much for the response – Rolenz Pangan Oct 21 '18 at 09:17

score 0 · Accepted Answer · answered Oct 21 '18 at 06:40

The approach is wrong sir. It's child element's default behavior. You can't set opacity:1 to the child element once you set it to the parent element.

You have so many ways to achieve this. But since you are using a background color and looking for the opacity I suggest the easiest way that use background:rgba(0,0,0,0.5).This stands that the background color is #333 with the opacity of 0.5.

Learn more about rgba() here.

#container{
 /*opacity: 0.5;*/    //remove this line
 margin: 0 auto;
 padding: 0 auto;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 width: 380px;
 height: 480px;
 /*background: #000;*/     //remove this line 
 border: 4px solid #ffbd04;
 border-radius: 20px;
 background:(0,0,0,0.5);   //newly added line
}

I will also try this, hahaha thank you so much for the reply — Rolenz Pangan, Oct 21 '18 at 09:19
Happy to help. If you found this as a useful answer upvote it — Ramesh, Oct 21 '18 at 09:25

Opacity Control Over other Items Inside the container

3 Answers3