"Shop:: Promo Box Page"
Bootstrap 3.1.0 Snippet by fathankudo

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 promo-box-page"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="cover-image"> <img src="http://image.kudo.co.id/wp-content/uploads/2015/05/BG-web-alternatif-001.jpg"> </div> <div class="cover-caption"> <div class="cover-excerpt"> Promo kambing murah. Kambingnya gak bauk. udah di mandiin 5x sehari pake aer anget, mantep deh nih kambing.<br/><br/> Kalau masih belum percaya coba baca poin dibawah ini...<br/><br/> </div> <div id="myModal" class="modal fade in"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <h4>Promo Full Descriptiions</h4> <p> Imak Flip Leather Cover Case Series for Samsung Galaxy S6 Edge<br/> An Excellent protection for your smartphone<br/> Imak Le Series untuk Samsung Galaxy S6 Edge. Le Series merupakan case<br/> terbaru Imak yang terbuat dari bahan material kulit berkualitas untuk<br/> mellindungi smartphone. Hadir dengan design corak yang elegan, case ini<br/> juga dapat digunakan sebagai stand.<br/><br/> Features<br/> Fashion, Simple, Perfect<br/> Imak Leather Case untuk Samsung Galaxy S6 Edge Inch hadir dengan design<br/> yang ringan, tipis, serta modis untuk menambah kesan stylish bagi<br/> smartphone Anda.<br/><br/> Leather Materials bring best protection for your mobile phone<br/> Imak Leather Case untuk Samsung Galaxy S6 Edge menggunakan bahan<br/> kulit berkualitas untuk melindungi smartphone dari goresan, guncangan dan<br/> kotoran lainnya<br/><br/> The Surface is Dustproof, Anti fingerprint, and Easy To Clean<br/> Imak Leather Case untuk Samsung Galaxy S6 Edge ini pun dilengkapi dengan<br/> anti fingerprint, sehingga melindungi smartphone Anda dari bercakan tangan<br/> yang mengganggu, serta dapat mencegah debu-debu kecil menempel.<br/> Walaupun terdapat debu atau kotoran yang menempel, Anda dapat dengan<br/> mudah membersihkannya.<br/><br/> Easy Access to All Buttons<br/> Anda tetap mendapat akses ke setiap port dan button yang terdapat di device<br/> Anda dengan gampang. </p> </div> <div class="modal-footer"> <div class="btn-group text-center"> <button type="button" class="btn btn-lg btn-success btn-lg" data-dismiss="modal">OK</button> </div> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dalog --> </div><!-- /.modal --> <div class="text-center"><a data-toggle="modal" href="#myModal">SELENGKAPNYA</a></div> </div> </div> </div> <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>
/* HERE STARTS THE MAGIC */ .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; } .category-child .thumb img { width: 200px; height: 150px; } .category-child .post-content span { line-height: 30px; position: relative; top: -10px; } /* END THE MAGIC*/ .promo-box-page .cover-image img { width: 100%; max-height: 200px; } .promo-box-page .cover-caption { background: white none repeat scroll 0 0; bottom: 0; left: 0; margin: auto; min-height: 130px; padding: 10px; position: absolute; right: 0; top: 88px; width: 80%; }

Related: See More


Questions / Comments: