Friday, July 20, 2007   —   Vienna 0 Comments

This tutorial is going to show you how to overlay a textbox on an image, like this. It's pretty straight forward, so I'm simply going to post the CSS and some exmaple HTML to give you an idea.

CSS

.imageoverlay {
	position: relative;
	width: 481px;
	height: 298px;
	background: #221815;
	overflow: hidden;
}

.imageoverlay .caption {
	filter: Alpha(Opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	padding: 0px;
	background-color: #000;
}

.imageoverlay .caption .text {
	padding: 16px;
	font: normal 12px Arial;
	color: #fff;
	text-align: left;
}

HTML

< div class="imageoverlay">
	< div class="caption">< div class="text">
		This tutorial is going to show you how to overlay a textbox on an image, like this.
		It's pretty straight forward, so I'm simply going to post the CSS and some exmaple HTML
		to give you an idea. Don't be shy to ask me for help none the less.
	< /div> < /div>
	< img src="http://www.petrosalema.com/blog/articles/burger_thumb_481.jpg" />
< /div>