This code is all CSS based and can be easily changed to fit your needs. From JSN Air.

CSS

.recent-projects .row {
	float: left;
	text-align: center;
	width: 100%;
	margin-bottom: 10px;
}

.recent-projects .row ul li {
	display: inline-block;
	list-style-type: none;
	margin-bottom: 30px;
	position: relative;
	border: 10px solid #f2f2f2;
}

.recent-projects .row ul li div {
	text-align: center;
	float: left;
}

.recent-projects .row ul li div a {
	float: left;
}

.recent-projects .row ul li span.cms {
	background: #ececec url(images/modules/779/icon-cms.png) 13px 13px no-repeat;
	width: 32px;
	height: 32px;
	padding: 12px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	position: absolute;
	bottom: -30px;
	z-index: 999;
	left: 50%;
	margin-left: -28px;
}

.recent-projects .row ul li span.cms.wordpress {
	background-position: 12px -139px;
}

.recent-projects .row ul li span.cms.drupal {
	background-position: 12px -296px;
}

.recent-projects .row ul li span.cms.html5 {
	background-position: 12px -451px;
}

.recent-projects span.mark {
	background: url(images/modules/779/view.png) center -40px no-repeat rgba(0,0,0,0.6);
	position: absolute;
	z-index: 99;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transition: all 0.3s;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	opacity: 0;
}

.recent-projects span.mark:hover {
	opacity: 1;
	background-position:center 60px;
}

.recent-projects .rp-separate {
	background: url(images/modules/779/bg-separate.png) center center no-repeat;
	height: 20px;
	width: 100%;
	display: inline-block;
}

@media only screen and (max-width: 480px), (max-device-width: 480px) {
	.recent-projects .row ul {
		width: 100%;
		text-align: center;
	}
	.recent-projects .row ul li {
		margin: 10px 0 30px 0;
	}
}

HTML

<div class="recent-projects">
	<div class="row">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
			ea commodo consequat.</p>
	</div>
	<div class="row">
		<ul>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project1.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project1.jpg" alt="Project1" /><span class="mark"></span></a>
				</div>
				<span class="cms joomla"></span></li>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project2.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project2.jpg" alt="Project2" /><span class="mark"></span></a>
				</div>
				<span class="cms wordpress"></span></li>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project3.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project3.jpg" alt="Project3" /><span class="mark"></span></a>
				</div>
				<span class="cms drupal"></span></li>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project4.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project4.jpg" alt="Project4" /><span class="mark"></span></a>
				</div>
				<span class="cms joomla"></span></li>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project5.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project5.jpg" alt="Project5" /><span class="mark"></span></a>
				</div>
				<span class="cms html5"></span></li>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project6.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project6.jpg" alt="Project6" /><span class="mark"></span></a>
				</div>
				<span class="cms joomla"></span></li>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project7.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project7.jpg" alt="Project7" /><span class="mark"></span></a>
				</div>
				<span class="cms wordpress"></span></li>
			<li class="project">
				<div class="project-thumb">
					<a href="/images/modules/779/project-images/project8.jpg" class="img-project"><img src="/images/modules/779/project-images/thumb/project8.jpg" alt="Project8" /><span class="mark"></span></a>
				</div>
				<span class="cms html5"></span></li>
		</ul>
	</div>
	<p style="text-align: center;"><a href="http://quantumwarp.com/" class="link-button button-green" style="margin: 0 0 30px;">View Product Tour</a></p>
	<div class="rp-separate">&nbsp;</div>
</div>