<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-md-12 jasgrid"> <div class="box-item"> <div class="box-post2"> <span class="label label-success"> <a href="#" rel="tag">Travel</a> </span> <h1 class="post-title"> <a href="#"> City in the sky: world's biggest hotel to open in Mecca </a> </h1> <span class="meta"> <span><i class="glyphicon glyphicon-comment"></i> <a href="http://wordpress.thebebel.com/showcase/newsbook/2015/01/19/meet-asias-best-destinations-for-the-summer/#respond">No Comments</a></span> <span><i class="glyphicon glyphicon-time"></i> Sep 15, 2015</span> </span> </div> <div class="box-post3"> <h1 class="post-title"> <a href="#">test</a> </h1> </div> <img src="http://placehold.it/1920x688" alt="City in the sky: world's biggest hotel to open in Mecca" class=""> </div> </div> </div> </div> <!-- /container -->

.jasgrid{padding:0;} .box-item { float: left; opacity: 1; overflow: hidden; position: relative; } .box-item img { width: 100%; } .box-item a,span{color:#FFF;} .box-item .box-post span.meta { font-family: sans-serif; font-size: 12px; color: #fff; margin-top: 15px; display: block; } .box-item .box-post span.meta span { margin-right: 15px; } .box-item .box-post { position: absolute; left: 0; bottom: 0; width: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%); padding: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .box-item .box-post h1..post-title { font-size:10pt; } .box-post2 { position: absolute; left: 0; top: 50%; border: 1px solid red; transform: translate(0%, -50%); width: 80%; } .box-post3 { position: absolute; right: 0; top: 50%; border: 1px solid red; transform: translate(0%, -50%); width: 19%; }