(CSS) With transparent box overlays on images, how do I make text non-transparent?

[Doju]

I'm using the code from this page: http://www.w3schools.com/Css/css_image_transparency.asp

And it works well, but the text ends up transparent as well (affected by the transparency of the parent div) and I'd prefer if it didn't.

 

[Hansr]

Only include the image in the div or end it prior to the text or set the text class to 100%?

 

[dellmerca]

Text on Image

Check here the simple example...CSS Text On Image

Dell

 

[godrifle]

Use rgba to set the background color of the inner div, and skip using opacity completely.

<style>
	.outer {
		background: url(http://ecx.images-amazon.com/images/I/41XcuhQ0M3L._SY450_.jpg) no-repeat;
		width: 210px;
		height: 450px;
	}
	.inner {
		display: none;
		color: #fff;
		text-align: center;
		height: 100%;
	}
	.outer:hover .inner {
		display: block;
		background-color: rgba(0,0,0,.7);
	}
</style>

<div class="outer">
	<div class="inner">My text here</div>
</div>