<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 category-child" style="margin-top:20px"> <div class="col-lg-2 col-md-4 col-xs-6 thumb "> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://kudo.co.id/wp-pictures/product/example/woven_che_white.jpg" alt=""> <div class="wrapper"> <div class="caption post-content"> <span>Kebutuhan Ibu dan Anak</span> </div> </div> </a> </div> <div class="col-lg-2 col-md-4 col-xs-6 thumb "> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://image.kudo.co.id/wp-content/uploads/2015/10/fashion.png" alt=""> <div class="wrapper"> <div class="caption post-content"> <span>Produk Pilihan</span> </div> </div> </a> </div> <div class="col-lg-2 col-md-4 col-xs-6 thumb "> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://image.kudo.co.id/wp-content/uploads/2015/10/hijab.png" alt=""> <div class="wrapper"> <div class="caption post-content"> <span>Produk Pilihan</span> </div> </div> </a> </div> <div class="col-lg-2 col-md-4 col-xs-6 thumb "> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://image.kudo.co.id/wp-content/uploads/2015/10/makanandaerah.png" alt=""> <div class="wrapper"> <div class="caption post-content"> <span>Produk Pilihan</span> </div> </div> </a> </div> <div class="col-lg-2 col-md-4 col-xs-6 thumb "> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://image.kudo.co.id/wp-content/uploads/2015/10/tiket.png" alt=""> <div class="wrapper"> <div class="caption post-content"> <span>Produk Pilihan</span> </div> </div> </a> </div> <div class="col-lg-2 col-md-4 col-xs-6 thumb "> <a class="thumbnail" href="#"> <img class="img-responsive" src="http://image.kudo.co.id/wp-content/uploads/2015/10/holiday.png" alt=""> <div class="wrapper"> <div class="caption post-content"> <span>Produk Pilihan</span> </div> </div> </a> </div> </div> </div>

.category-child .post-content span { color: #fff; } .category-child .post-content { background-color: rgba(7, 7, 7, 0.65); color: #fff; margin-top: -30px; position: relative; text-align: center; width: 100%; z-index: 1; height: 30px; overflow: hidden; } .thumb img { width: 200px; height: 150px; } .post-content span { line-height: 30px; position: relative; top: -10px; }