HTML code
This is the html code used to create this bootstrap snippet, You can copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection
<div class="row">
<div class="large-4 columns">
<div class="portfolio-box">
<img src="http://lorempixel.com/300/200/nature/1/" class="img-responsive" alt="">
<a href="#">
<p>View detail</p>
</a>
</div>
</div>
<div class="large-4 columns">
<div class="portfolio-box">
<img src="http://lorempixel.com/300/200/nature/2/" class="img-responsive" alt="">
<a href="#">
<p>View detail</p>
</a>
</div>
</div>
<div class="large-4 columns">
<div class="portfolio-box">
<img src="http://lorempixel.com/300/200/nature/3/" class="img-responsive" alt="">
<a href="#">
<p>View detail</p>
</a>
</div>
</div>
</div>
<div class="row">
<div class="large-4 columns">
<div class="portfolio-box">
<img src="http://lorempixel.com/300/200/nature/4/" class="img-responsive" alt="">
<a href="#">
<p>View detail</p>
</a>
</div>
</div>
<div class="large-4 columns">
<div class="portfolio-box">
<img src="http://lorempixel.com/300/200/nature/5/" class="img-responsive" alt="">
<a href="#">
<p>View detail</p>
</a>
</div>
</div>
<div class="large-4 columns">
<div class="portfolio-box">
<img src="http://lorempixel.com/300/200/nature/6/" class="img-responsive" alt="">
<a href="#">
<p>View detail</p>
</a>
</div>
</div>
</div>
CSS code
This is the css code used to create this bootstrap snippet, You can copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection
body{
margin-top:20px;
background:#eee;
}
.img-responsive{
width:100%;
height:auto;
}
.portfolio-box{
position: relative;
overflow: hidden;
margin-bottom: 50px;
}
.portfolio-box a{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: block;
}
.portfolio-box a p{
width: 100%;
position: absolute;
left: 0;
bottom:-100%;
margin: 0;
text-align: center;
font-size: 18px;
color:#fff;
padding: 10px;
background-color: rgba(0,0,0,0.3);
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
}
.portfolio-box:hover a p{
bottom: 0;
}