子元素更改父图像的不透明度

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>

Answer 1

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.

Answer 2

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;
}

Answer 3

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>

Answer 4

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/