Post Thumbnail List
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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-sm-4 col-md-4">
<div class="post">
<div class="post-img-content">
<img src="http://placehold.it/460x250/e67e22/ffffff&text=HTML5" class="img-responsive" />
<span class="post-title"><b>Make a Image Blur Effects With</b><br />
<b>CSS3 Blur</b></span>
</div>
<div class="content">
<div class="author">
By <b>Bhaumik</b> |
<time datetime="2014-01-20">January 20th, 2014</time>
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div>
<a href="http://www.jquery2dotnet.com/2014/01/jquery-highlight-table-row-and-column.html" class="btn btn-warning btn-sm">Read more</a>
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="post">
<div class="post-img-content">
<img src="http://placehold.it/460x250/2980b9/ffffff&text=CSS3" class="img-responsive" />
<span class="post-title"><b>Make a Image Blur Effects With</b><br />
<b>CSS3 Blur</b></span>
</div>
<div class="content">
<div class="author">
By <b>Bhaumik</b> |
<time datetime="2014-01-20">January 20th, 2014</time>
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div>
<a href="http://www.jquery2dotnet.com/2013/11/share-social-media-round-buttons.html" class="btn btn-primary btn-sm">Read more</a>
</div>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="post">
<div class="post-img-content">
<img src="http://placehold.it/460x250/47A447/ffffff&text=jQuery" class="img-responsive" />
<span class="post-title"><b>Make a Image Blur Effects With</b><br />
<b>CSS3 Blur</b></span>
</div>
<div class="content">
<div class="author">
By <b>Bhaumik</b> |
<time datetime="2014-01-20">January 20th, 2014</time>
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div>
<a href="http://www.jquery2dotnet.com/2013/07/cool-social-sharing-button-using-css3.html" class="btn btn-success btn-sm">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
body
{
padding-top: 20px;
background-color: #F7F7F7;
}
.post
{
background-color: #FFF;
overflow: hidden;
box-shadow: 0 0 1px #CCC;
}
.post img
{
filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
}
.post .content
{
padding: 15px;
}
.post .author
{
font-size: 11px;
color: #737373;
padding: 25px 30px 20px;
}
.post .post-img-content
{
height: 196px;
position: relative;
}
.post .post-img-content img
{
position: absolute;
}
.post .post-title
{
display: table-cell;
vertical-align: bottom;
z-index: 2;
position: relative;
}
.post .post-title b
{
background-color: rgba(51, 51, 51, 0.58);
display: inline-block;
margin-bottom: 5px;
color: #FFF;
padding: 10px 15px;
margin-top: 5px;
}
https://github.com/mattbank…,You can use the equalHeights-Jquery-Plugin.,How can you make all 3 boxes of the same height?Will, a css min-height property be enough?,You asked this question a long time ago Antonio, but here’s a newer option I made for the equal heights with bootstrap 3 using css alone. https://codepen.io/bootstra…,Don’t worry meanwhile i’ve dropped bootstrap for foundation. And with latest foundation i dropped it in favour of UIKIT :))),The author is BhaumikPatel

Loading...