Bootstrap Post Thumbnail List with Blur


<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>John Smith</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="javascript:;" 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>Jessica Alba</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="javascript:;" 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>Rick Ross</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="javascript:;" 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;
}