Child elements changing opacity with parent Image

Question

I have a <div> element which has a background image. On top of that I have some text that is hidden but when the user hovers over the <div> element that text will show and the <div> opacity will lower. My problem is when you hover over the div all elements inside that change opacity as well. I have looked through stackoverflow to see if anyone has the same problem but all i found were answers that had RGBA using background colors (not images).

Here is my css:

    .pic{
      background-image:url(http://www.granitesportsinstitute.com/wp-content/uploads/2014/06/Green-Sea-Turtle-150x150.jpg);
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
} 
.textstuff{
    visibility:hidden;
}
.pic:hover .textstuff{
    visibility:visible;
    color:black;
}
.pic:hover{
    filter: alpha(opacity=30);  
    -moz-opacity: 0.3;  
    -khtml-opacity: 0.3;  
    opacity: 0.3;
}

HTML HERE:

    <div class="pic" style="height:150px;width:150px;">
       <div class="textstuff">this is text</div>
    </div>

You'll have to re-factor. Opacity will change the opacity of the wrapper and any children and CSS cannot change the opacity of a bg image. — Paulie_D, Aug 18 '14 at 22:04
possible duplicate of [Set opacity of background image without affecting child elements](http://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements) — Paulie_D, Aug 18 '14 at 22:05
Use javascript to set the opacity of the relevant child elements onmouseover, if this is an option you can use — The One and Only ChemistryBlob, Aug 18 '14 at 22:06

score 1 · Answer 1 · answered Aug 18 '14 at 22:04

Anytime you change the opacity of a parent element, it automatically applies to all children. The only way to get around this is to not have your opacified element be the parent of the text. It'd probably be best to refactor the background element as a sibling of any other elements in that container and just give it some absolute positioning.

score 1 · Answer 2 · answered Aug 18 '14 at 22:07

Try with :before pseudo-element:

.pic {
    position: relative;
}

.pic:before {
    background-image:url(http://www.granitesportsinstitute.com/wp-content/uploads/2014/06/Green-Sea-Turtle-150x150.jpg);
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
} 

.textstuff{
    visibility:hidden;
}

.pic:hover .textstuff{
    visibility:visible;
    color:black;
}

.pic:hover:before{
    filter: alpha(opacity=30);  
    -moz-opacity: 0.3;  
    -khtml-opacity: 0.3;  
    opacity: 0.3;
}

score 0 · Answer 3 · answered Aug 18 '14 at 22:05

Any element within the .pic class would receive the opacity, in order for it not to receive it you have to create a wrapper for the pic and put the .textstuff in that wrapper sibling to the .pic

<div class="pic_wrapper">
    <div class="pic"></div>
    <div class="textstuff"></div>
</div>

score 0 · Accepted Answer · answered Aug 18 '14 at 22:10

I was able to get this working by wrapping it and setting the .pic to position absolute. This way it fills up the background but doesn't affect the text:

<div class="wrapper">
    <div class="pic"></div>
    <div class="textstuff">
        <p>This is the textstuff</p>
    </div>
</div>

CSS code:

.wrapper {
    position: relative;
}

.pic {
    background-image:url(http://www.granitesportsinstitute.com/wp-content/uploads/2014/06/Green-Sea-Turtle-150x150.jpg);
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.textstuff {
    visibility:hidden;
}
.pic:hover ~ .textstuff {
    visibility:visible;
    color:black;
}
.pic:hover {
    opacity: 0.3;
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

Here is a fiddle showing an example:

http://jsfiddle.net/jqxw5ajz/

Child elements changing opacity with parent Image

4 Answers4