Text box over the picture.

by Sergey Linnick

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>HTML5</title>
	<link media="all" rel="stylesheet" href="css/all.css">
</head>
<body>
<div id="wrapper">
	<div class="visual">
		<div class="holder">
			<img src="http://upload.wikimedia.org/wikipedia/commons/e/ee/Flag_colors.jpg" alt="" width="" height="" />
		</div><div class="text">
			<div>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam neque lacus, imperdiet mattis iaculis ut, consequat sollicitudin metus. Pellentesque ullamcorper lacus sed sapien condimentum in venenatis massa semper. Sed convallis, libero sed consequat aliquet, nisl mi rutrum massa, a m</p>
			</div>
		</div>
	</div>
</div>
</body>
</html>

CSS

body{
	margin: 0;
	color: #000;
	font: 11px Arial, Helvetica, sans-serif;
	background: #fff;
}
img{border-style: none;}
#wrapper{
	padding: 50px;
}
.visual {
	border:1px solid #000;
	white-space:nowrap;
	width:500px;
	overflow:hidden;
	position:relative;
}
.visual img {vertical-align:top;}
.visual .holder {
	display:inline-block;
	vertical-align:bottom;
	width:100%;
}
.visual .text {
	display:inline-block;
	vertical-align:bottom;
	position:relative;
	left:-100%;
}
.visual .text div {
	background:  rgba(10,220,248,.2);
	font-size:14px;
	line-height:18px;
	color:#fff;
	padding:10px;
}
.visual p {
	white-space:normal;
	margin:0;
	position:relative;
}