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

Doju · Oct 22, 2011

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 · Oct 22, 2011

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

dellmerca · Jul 15, 2014

Text on Image

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

Dell

godrifle · Jul 16, 2014

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

Code:

<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>

Search

Search

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

Doju

macrumors 68000

Hansr

macrumors 6502a

dellmerca

macrumors newbie

godrifle

macrumors 6502

Our Staff