Z-index issues not sure what to do now - html

Question

How do i make the h1 and img elements "appear" ontop of the opaque div they are contained in? I mean, how do I make it look like they are not being affected by the opaque-ness of their parent div?
Fiddle:
<div id="main">
<div id="seethru">
<img ... />
<h1>hi</h1>
</div>
</div>
#main {
background-color: green;
}
#seethru {
width: auto;
height: auto;
opacity: 0.4;
background-color: blue;
}
#seethru img, h1 {
position: relative;
z-index: 9999;
color: white;
}
So far nothing is working, and I can't separate this content, it must be inside the opaque div

Answer 1

You are using opacity property which will make it's child elements opaque too, so in order to prevent that use rgba(0, 0, 255, .4) and that will prevent child elements to get opaque.
Explanation for rgba : rgba() is nothing but pure rgb(red, green, blue) but with an additional parameter of a which is alpha, nothing but opacity, so you can use this as an alternative when you are dealing with background colors
Demo
There are few workarounds where you can prevent child elements from getting opaque, for example
For details on browser support of rgba (For IE, you can use CSS3 Pie)
Note: When you use background-color: rgba() always remember to use a
fall back color declared using a hex or pure rgb so that
non-supportive browsers won't fail to render at least the base color
but without opacity, alternatively you can also use transparent png's as a
background with background-repeat property(But this is 90's way to
do) ;)
As #Adrift Commented, You can read here, why actually the child elements get opaque too

Answer 2

internet explorer up to IE8 doesn't supports the RGBA colors. So it would be better if you place h1 and img element outside the opaque div and then move it visually inside using CSS positioning.
Check out this great tutorial it will certainly solve your problem.
http://www.tutorialrepublic.com/css-tutorial/css-opacity.php