<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail img-thumb-bg">
<div class="overlay"></div>
<div class="caption">
<div class="tag"><a href="#">Real Estate</a></div>
<div class="title"><a href="#">Gorgeous Ensea House in California</a></div>
<div class="clearfix">
<span class="meta-data">By <a href="">Admin</a>on 29/06/2016</span>
<span class="meta-data pull-right"><a href=""><i class="fa fa-heart-o"></i> 4</a></span>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nulla porro qui quo expedita voluptas ab iure dolore.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail img-thumb-bg">
<div class="overlay"></div>
<div class="caption">
<div class="tag"><a href="#">Real Estate</a></div>
<div class="title"><a href="#">Gorgeous Ensea House in California</a></div>
<div class="clearfix">
<span class="meta-data">By <a href="">Admin</a>on 29/06/2016</span>
<span class="meta-data pull-right"><a href=""><i class="fa fa-heart-o"></i> 4</a></span>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nulla porro qui quo expedita voluptas ab iure dolore.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail img-thumb-bg">
<div class="overlay"></div>
<div class="caption">
<div class="tag"><a href="#">Real Estate</a></div>
<div class="title"><a href="#">Gorgeous Ensea House in California</a></div>
<div class="clearfix">
<span class="meta-data">By <a href="">Admin</a>on 29/06/2016</span>
<span class="meta-data pull-right"><a href=""><i class="fa fa-heart-o"></i> 4</a></span>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nulla porro qui quo expedita voluptas ab iure dolore.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail img-thumb-bg">
<div class="overlay"></div>
<div class="caption">
<div class="tag"><a href="#">Real Estate</a></div>
<div class="title"><a href="#">Gorgeous Ensea House in California</a></div>
<div class="clearfix">
<span class="meta-data">By <a href="">Admin</a>on 29/06/2016</span>
<span class="meta-data pull-right"><a href=""><i class="fa fa-heart-o"></i> 4</a></span>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nulla porro qui quo expedita voluptas ab iure dolore.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail img-thumb-bg">
<div class="overlay"></div>
<div class="caption">
<div class="tag"><a href="#">Real Estate</a></div>
<div class="title"><a href="#">Gorgeous Ensea House in California</a></div>
<div class="clearfix">
<span class="meta-data">By <a href="">Admin</a>on 29/06/2016</span>
<span class="meta-data pull-right"><a href=""><i class="fa fa-heart-o"></i> 4</a></span>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nulla porro qui quo expedita voluptas ab iure dolore.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6">
<div class="thumbnail img-thumb-bg">
<div class="overlay"></div>
<div class="caption">
<div class="tag"><a href="#">Real Estate</a></div>
<div class="title"><a href="#">Gorgeous Ensea House in California</a></div>
<div class="clearfix">
<span class="meta-data">By <a href="">Admin</a>on 29/06/2016</span>
<span class="meta-data pull-right"><a href=""><i class="fa fa-heart-o"></i> 4</a></span>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo nulla porro qui quo expedita voluptas ab iure dolore.</p>
</div>
</div>
</div>
</div>
</div>
</div>
body {
padding: 10px 0;
background-color: #f4f4f4;
font-family: 'Montserrat', sans-serif;
}
a {
text-decoration: none;
transition: all 0.3s ease-in-out;
}
a:hover,
a:focus,
a:active {
text-decoration: none;
}
.btn {
text-transform: uppercase;
}
.btn.btn-lg {
padding: 6px 30px;
}
.thumbnail-title {
font-size: 20px;
margin-top: 5px;
}
.img-thumb-bg {
padding: 0;
overflow: hidden;
min-height: 200px;
position: relative;
border-radius: 3px;
background-position: center;
background-color: transparent;
background-image: url('http://projects.mostlikers.com/_images/estate-image.jpg');
}
.img-thumb-bg p {
color: #fff;
margin-bottom: 0;
line-height: 16px;
}
.img-thumb-bg .overlay {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
transition: all 0.3s ease-in-out;
background: rgba(0, 0, 0, 0);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 50%, #000000 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 50%, #000000 100%);
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 50%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, #000000 100%);
background: -webkit-gradient(left top, left bottom, color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, #000000));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0);
}
.img-thumb-bg .caption {
bottom: -5px;
height: 100px;
font-size: 12px;
position: absolute;
padding: 0 20px 20px;
transition: all 0.3s ease-in-out;
}
.img-thumb-bg .caption .tag a {
color: #fff;
padding: 0 5px;
font-size: 12px;
border-radius: 2px;
display: inline-block;
text-transform: uppercase;
background-color: #2980B9;
}
.img-thumb-bg .caption .title {
margin-top: 5px;
font-size: 18px;
line-height: 20px;
text-transform: uppercase;
}
.img-thumb-bg .caption .title a {
color: #fff;
}
.img-thumb-bg .caption .title a:hover {
color: #2980B9;
}
.img-thumb-bg .caption .meta-data {
color: #777;
font-size: 12px;
line-height: 12px;
margin-bottom: 15px;
}
.img-thumb-bg .caption .meta-data a {
color: #777;
}
.img-thumb-bg .caption .meta-data a .fa {
color: #2980B9;
}
.img-thumb-bg .caption .meta-data a:hover {
color: #2980B9;
}
.img-thumb-bg .caption .content {
display: none;
}
.img-thumb-bg:hover .overlay {
background: rgba(46, 49, 58, 0.8);
}
.img-thumb-bg:hover .caption {
bottom: 60px;
}
.img-thumb-bg:hover .caption .content {
display: block;
}
