Bootstrap 3 Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="col-sm-4 peaceful">
	<div class="pre-inner">
		<img src="http://lorempixel.com/304/188/">
			<a href="http://www.google.com">
				<div class="pre-info">
					<h4>See our activity philosophy</h4>
					<a class="btn btn-success" href="http://www.google.com">Click Here </a>
				</div>
			</a>
	</div>
</div>

<div class="col-sm-4 peaceful">
	<div class="pre-inner">
		<img src="http://lorempixel.com/304/188/">
			<a href="http://www.google.com">
				<div class="pre-info">
					<h4>See our activity philosophy</h4>
					<a class="btn btn-success" href="http://www.google.com">Click Here </a>
				</div>
			</a>
	</div>
</div>

<div class="col-sm-4 peaceful">
	<div class="pre-inner">
		<img src="http://lorempixel.com/304/188/">
			<a href="http://www.google.com">
				<div class="pre-info">
					<h4>See our activity philosophy</h4>
					<a class="btn btn-success" href="http://www.google.com">Click Here </a>
				</div>
			</a>
	</div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.pre-inner {
	position: relative;
	max-width: 300px;
	overflow: hidden;
	margin: 0px auto 0px;
}

.pre-info {
   position: absolute;
   padding-top: 10px;
   padding-left: 20px;
   padding-right: 20px;
   padding-bottom: 20px;
   bottom: -187px;
   transition: all 0.5s ease;
   background-color: rgba(57, 68, 97, 0.65);
   left: 0;
   right: 0;
}

.pre-inner:hover .pre-info {
   background-color: rgba(57, 68, 97, 0.65);
   bottom: 0; 
   height: 100%;
   width: 100%;
   color: #fff; 

}