Child elements changing opacity with parent Image
- by mitch
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>
