How to create parent div with opacity while keeping the opacity of the text at 100%

Question

So I have a div with an opacity set with a background image. I want the text that pops up when hovering the div to stay 100%. Could anyone possibly help me with this? Any help would be greatly appreciated!

DEMO

<body>
    <div id="container">
        <div id="container_inner">
        <div id="container_txt">
            <p><a href="#">WORLD OF WARCRAFT</a></p>
            <p id="p_txt">This is a simple World of Warcraft styled div that has been done implementing html, css, and css3</p>
        </div>
        </div>
    </div>
</body>

What do you mean by *I want the text that pops up when hovering the div to stay 100%* — Mr. Alien, Oct 24 '13 at 04:36
In the case of your demo, could you not just remove the `opacity` property, and decrease the alpa on the background color? You have already set it with rgba, using an semi-transparent opacity.. So I am confused — Blake Mann, Oct 24 '13 at 04:39
@PastorBones, -Koala I understood the question just now, if you guys see, this is not a duplicate.. — Mr. Alien, Oct 24 '13 at 04:51
@Mr.Alien this is a duplicate as it is a common problem. Seriously, try googling or using the search box in the top right corner of this site. — Pastor Bones, Oct 24 '13 at 04:56
@PastorBones Again, this is not an exact dupe, here we are dealing with opaque image, we cannot use `rgba()` for making an image opaque — Mr. Alien, Oct 24 '13 at 04:59
@Mr.Alien In one google search and less than a minute I've found multiple solutions to your question. — Pastor Bones, Oct 24 '13 at 05:13
@PastorBones I didn't said that it's not a dupe, there are many out there, the one you linked was not relevant :) — Mr. Alien, Oct 24 '13 at 05:17

score 5 · Accepted Answer · edited Oct 24 '13 at 04:52

What I fiddled upon and came on conclusion though is this is what you need I think.

Below is CSS that you have to use.

Fiddle: Click HERE

Demo (Transparent background)

html, body {
    margin: 0;
    height: 100%;
    background-color: #575980;
}
#container {
    width: 200px;
    height: 300px;
    cursor: pointer;
    overflow: hidden;
    margin: 100px auto;
    border: 1px solid #333;
    background-color: #000;
    box-shadow: 0px 2px 8px #111;
}
#container_inner {
    opacity: .8;
    margin: auto;
    width: 200px;
    height: 300px;
    transition: .5s;
    position: relative;
    background-color: #FFF;
    background-image: url('http://static.mmo-champion.com/mmoc/images/news/2010/march/ss973.jpg');
    background-size: 200% 100%;
    background-position: 60% 50%;
    box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5);
}
#container_inner:hover, #container_txt:hover {
    opacity: 1;
}
#container_txt {
    color: #fff;
    height: 0px;
    bottom: 0px;
    width: 200px;
    transition: .2s;
    position: absolute;
    font: normal 1em calibri;
    background-color: rgba(0, 0, 0, 1);
}
#container_inner:hover #container_txt {
    height: 100px;
    opacity: 1;
}
p {
    top: -5px;
    padding: 0px 10px;
    position: relative;
}
p a {
    color: #fff;
    text-decoration: none;
}
#p_txt {
    top: -15px;
    position: relative;
    font-size: 12px;
}

okey so you want black popup transparent and the text to be 100 %..Right ?? — Ashish Sharma, Oct 24 '13 at 04:50
background-color: rgba(0, 0, 0, 0.5); //Change of opacity !!! ♥ — Ashish Sharma, Oct 24 '13 at 04:54

score 1 · Answer 2 · answered Oct 24 '13 at 06:42

Just for a better understanding:

This CSS changes the opacity of the complete element (background, border, text, containing child-elements, ...)

#container{
    background-color: #000;
    opacity: 0.5;
}

But this CSS changes the opacity of a color. And this "modified" color will be used for background.

#container{
    background-color: rgba(0, 0, 0, 0.5);
}

score 0 · Answer 3 · answered Oct 24 '13 at 04:52

The problem is that a child cannot be less opaque than its parent. In this case, instead of a background image, I would use a :after pseudo element to create the background, then put the background image/opacity/ whatever on that, and leave the parent alone.

I modified your fiddle to do this (http://jsfiddle.net/srfGg/4/), but the main key is:

#container_inner:after{
    opacity:0.8;
    transition:.2s;
    content: "";
    display:block;
    color:#FFF;
    height:100%;
    width:100%;
    position: aboslute;
    top:0;left:0;right:0;bottom:0;
    background-color: #FFF;
    background-image: url('http://static.mmo-champion.com/mmoc/images/news/2010/march/ss973.jpg');
    background-size: 200% 100%;
    background-position: 60% 50%;    
}
#container_inner:hover:after, #container_txt:hover {
    opacity: 1;
}

How to create parent div with opacity while keeping the opacity of the text at 100%

3 Answers3