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>