<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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-6 col-xs-12"> <div class="single-blog"> <div class="single-blog-img"> <a href="blog_single.html"><img src="http://demos.codexcoder.com/labartisan/html/heaven-hands-demo/images/home-blog-01.jpg" alt="Blog Image"></a> </div> <div class="blog-content-box"> <div class="blog-post-date"> <span>12</span> <span>Nov 2016</span> </div> <div class="blog-content"> <h4><a href="blog_single.html">Dramaticaly simplify user friendly</a></h4> <div class="meta-post"> <span class="author">Post By: <a href="#">Robot Smith</a></span> <span><a href="#">8 Comments</a></span> <span>12 likes</span> </div> <div class="exerpt"> Namnec tellus odio tincidunt auctor ornare that odio. vitae erat consequat auctor eu in aelit. Class aptent sociosqu ad litora torquent per conubia nostra. </div> <a href="blog_single.html" class="btn-two">Read More</a> </div> </div> </div> </div> </div> </div>

.single-blog-img { overflow: hidden; } .single-blog-img a img { width: 100%; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; transition: .3s; } .single-blog:hover .single-blog-img a img { -webkit-transform: scale(1.09); -moz-transform: scale(1.09); -ms-transform: scale(1.09); -o-transform: scale(1.09); transform: scale(1.09); } .single-blog-img img { width: 100%; } .blog-content-box { padding-left: 25px; padding-top: 27px; margin-left: 34px; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); background: #fff; padding-bottom: 30px; } .blog-post-date { display: table; float: left; margin-right: 30px; } .blog-post-date span:first-child { color: #ffca00; display: block; font-size: 48px; font-weight: 700; line-height: 1; margin-top: -11px; margin-bottom: -4px; text-align: center; } .blog-post-date span:last-child { font-size: 14px; color: #212121; font-weight: 600; } .blog-content { display: table; } .blog-content h4 { color: #212121; } .blog-content h4 a { color: #212121; text-decoration: none; -webkit-transition: .2s; transition: .2s; } .blog-content h4 a:hover { color: #FFCA00; } .meta-post { margin: 10px 0 13px; } .meta-post span { color: #696969; font-size: 15px; position: relative; padding-right: 23px; } .author { margin-bottom: 60px; } .meta-post span a { color: #696969; -webkit-transition: .2s; transition: .2s; } .meta-post span:after { position: absolute; content: "-"; right: 4px; } :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .meta-post span:last-child { padding-right: 0; } .exerpt { line-height: 28px; color: #696969; margin-bottom: 37px; }