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;
}

.peaceful {
  overflow:hidden;
  position:relative;
}
.peaceful a:before {
  content:'';
  top:0;
  left:0;
  right:0;
  bottom:0;
  position:absolute;
}