I have a div with two childs: an h1 element and an image. The image fills the entire div and the h1 element is positioned absolute to hover over the image.

That's working fine, but now I want to make the background of the hovering h1 have an rgba background of 0.8 alpha and the image an opacity of 0.8. However, if only set the rgba for the h1-tag it works fine. But when I also set the opacity of the image then the h1-text becomes unreadable (too much transparency).

Does anybody know how to fix that?

	height: 350px;
	width: 450px;
	background-color: black;
	margin: 0 21px 0 21px;
	border: 1px solid black;
	position: relative;

.project h1{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 450px;
	height: 40px;
	background-color: rgba(38,38,38, 0.8);
	font-size: 1.4em;
	padding: 20px 0px 20px 0px;
	margin: 10px 0px 0px 0px;

.project img{
	width: 100%;
	height: 100%;
	opacity: 0.8;
	filter:alpha(opacity=80); /* For IE8 and earlier */
<ul class="projects">
    <li class="project">
        <h1>Visualization of search algorithms</h1>
        <img src="images/project-screenshots/algorithm-visualizations-project/visualization-project-image.png" />
    <li class="project">
        <h1>Player vs. Player chess application</h1>
        <img src="images/project-screenshots/schaak-project/schaak-project-image.png" />
So the problem is that the h1 tag with the rgba color is effected by the opacity of the image.

Grtz Stefan