CSS Overlay: Text at the Bottom of Image or Text Ribbon

Here is a working sample with code for CSS overlay on Images. It is not using any JavaScript library. It is just HTML and CSS. It is very simple to create. Just you need to adjust the css for making the alignment very specific if you HTML is different. Important points are marked in CSS code itself. Those point are essential to give it that look. code is also simple. Many lines are just there to offset default CSS that comes for UL and LI.

How the example code looks?

CSS Overlay Demo Page.

CSS Overlay: CSS code used in the example

<style type="text/css">
li a {
	color:white;
}
ul {
	width:310px;
	padding:0;
	margin:0;
}
li {
	position:relative; /*important*/
	float:left; /*important*/
	display:inline; /* also important here */
	list-style-type:none;
	width:150px;
	padding:0;
	margin:0;
	margin-bottom:10px; /* Seperate each item vertically */
}
li .desc {
	position:absolute; /* Important */
	width:100%; /* Important */
	bottom:0; /* Important */
	left:0;
	background-color:rgba(0, 0, 0, 0.5);
	filter:alpha(opacity=50);
}
li .desc div {
	padding:5px;
	text-align:center;
}
li img {
	vertical-align:top;
	border:1px solid gray; /* or 0px */
}
li:nth-child(even) {
	margin-left:5px; /* Seperate each item vertically */
}
li:nth-child(odd) {
	margin-right:5px; /* Seperate each item vertically */
}
</style>
 

CSS Overlay: HTML code used in the example

<ul>
	<li>
		<a href="http://farm7.staticflickr.com/6212/6410132909_375852219c_b.jpg">
			<img src="http://farm7.staticflickr.com/6212/6410132909_375852219c_m.jpg"  width="150" />
			<div  class="desc"> <!-- This extra div is required to set margin/padding for text below.-->
<!--Otherwise the below one leak out to right side -->
				<div>Text 1</div>
			</div>
		</a>
	</li>
	<li>
		<a href="http://farm7.staticflickr.com/6212/6410132909_375852219c_b.jpg">
			<img src="http://farm7.staticflickr.com/6212/6410132909_375852219c_m.jpg" width="150" />
			<div  class="desc">
				<div>Text 2</div>
			</div>
		</a>
	</li>
	<li>
		<a href="http://farm7.staticflickr.com/6212/6410132909_375852219c_b.jpg">
			<img src="http://farm7.staticflickr.com/6212/6410132909_375852219c_m.jpg" width="150" />
			<div  class="desc">
				<div>Text 3</div>
			</div>
		</a>
	</li>
	<li>
		<a href="http://farm7.staticflickr.com/6212/6410132909_375852219c_b.jpg">
			<img src="http://farm7.staticflickr.com/6212/6410132909_375852219c_m.jpg" width="150" />
			<div  class="desc">
				<div>Text 4</div>
			</div>
		</a>
	</li>
</ul>

Reference: web.enavu.com