Website in Grid
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-2 col-md-2 well rowCell">
<img src="http://lorempixel.com/1500/600/abstract/1" /> <div class="rowCell-text">hola</div>
</div>
<div class="col-xs-6 col-sm-2 col-md-2 well rowCell">
<img src="http://lorempixel.com/1500/600/abstract/2" /><div class="rowCell-text">hola</div>
</div>
<div class="col-xs-6 col-sm-2 col-md-2 well rowCell">
<img src="http://lorempixel.com/1500/600/abstract/3" />
</div>
<div class="col-xs-6 col-sm-2 col-md-2 well rowCell">
<img src="http://lorempixel.com/1500/600/abstract/4" />
</div>
<div class="col-xs-6 col-sm-2 col-md-2 well rowCell">
<img src="http://lorempixel.com/1500/600/abstract/4" />
</div>
<div class="col-xs-6 col-sm-2 col-md-2 well rowCell">
<img src="http://lorempixel.com/1500/600/abstract/4" />
</div>
</div>
</div>
CSS
body {
margin: 5px;
}
.rowCell {
background: white;
padding: 5px;
position: relative;
}
.rowCell img {
width: 100%;
-webkit-transition: -webkit-transform .4s;
}
.rowCell-text {
position: absolute; opacity:0; height: 0; bottom: 0; z-index: 999;
background-color: black; color: white; width: 267px;
-webkit-transition: -webkit-transform .4s, opacity .4s;}
.rowCell:hover img {
-webkit-transform: translateY(-15px);
}
.rowCell:hover .rowCell-text{
height: 40px; opacity: 1;
-webkit-transform: translateY(20px);
}
@media (max-width: 480px){
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11 {
float: none;
width:100%;
}
}