"Simple News Grid"
Bootstrap 3.3.0 Snippet by mstafkmx

<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"> <p><h3>Copyrights of images and content for theguardian.</h3></p> </div> </div> <div class="container"> <div class="row"> <div class="col-md-6 jasgrid"> <div class="box-item"> <div class="box-post"> <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> <img src="https://i.guim.co.uk/img/static/sys-images/Guardian/Pix/pictures/2015/5/22/1432299215355/baff131f-a335-44eb-ad66-03c52c5c2213-620x372.jpeg?w=700&q=85&auto=format&sharp=10&s=31a22f00a85840740c2a8af5604abfb0" alt="City in the sky: world's biggest hotel to open in Mecca" class=""> </div> <div class="box-item"> <div class="box-post"> <span class="label label-success"> <a href="#" rel="tag">Travel</a> </span> <h1 class="post-title"> <a href="#"> Why Palladio is the world's favourite 16th-century architect </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> <img src="https://i.guim.co.uk/img/static/sys-images/Guardian/Pix/pictures/2015/9/11/1441964447628/5f03adcd-3947-4aec-ba42-8d9365fcf755-620x615.jpeg?w=700&q=85&auto=format&sharp=10&s=661551e4de042aee3003bca57aca876c" alt="Why Palladio is the world's favourite 16th-century architect" class=""> </div> <div class="box-item"> <div class="box-post"> <span class="label label-success"> <a href="#" rel="tag">Travel</a> </span> <h1 class="post-title"> <a href="#"> Return of the prefabs: inside Richard Rogers' Y:Cube homes for homeless people </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> <img src="https://i.guim.co.uk/img/media/ef4a19c1582b9feb6c49e7f6d783aa234dc3c60c/0_0_2480_1487/master/2480.jpg?w=700&q=85&auto=format&sharp=10&s=a7485a359c5c19e89d7f0e8f71b31c8c" alt="Return of the prefabs: inside Richard Rogers' Y:Cube homes for homeless people" class=""> </div> <div class="box-item"> <div class="box-post"> <span class="label label-success"> <a href="#" rel="tag">Travel</a> </span> <h1 class="post-title"> <a href="#"> The ‘sky pool’ is just the start: London prepares for a flood of bathing oligarchs </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> <img src="https://i.guim.co.uk/img/static/sys-images/Guardian/Pix/pictures/2015/8/20/1440084421494/658509dc-71ec-4329-a44a-65a8968f31eb-2060x1236.jpeg?w=700&q=85&auto=format&sharp=10&s=95d11c21789512a206c58f6e09161c3b" alt="The ‘sky pool’ is just the start: London prepares for a flood of bathing oligarchs" class=""> </div> <div class="box-item"> <div class="box-post"> <span class="label label-success"> <a href="#" rel="tag">Travel</a> </span> <h1 class="post-title"> <a href="#"> Carbuncle Cup: Walkie Talkie wins prize for worst building of the year </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> <img src="https://i.guim.co.uk/img/static/sys-images/Guardian/Pix/pictures/2015/9/1/1441111760813/babad85b-8749-43dd-8b0a-dda57f7de279-2060x1236.jpeg?w=700&q=85&auto=format&sharp=10&s=943b47a6776b1ecbfb4c6db7d8932d45" alt="Carbuncle Cup: Walkie Talkie wins prize for worst building of the year" class=""> </div> </div> <div class="col-md-6 jasgrid"> <div class="box-item"> <div class="box-post"> <span class="label label-success"> <a href="#" rel="tag">Travel</a> </span> <h1 class="post-title"> <a href="#"> 'This design is total rubbish': Preston's majestic bus station gets a zombie makeover </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> <img src="https://i.guim.co.uk/img/static/sys-images/Guardian/Pix/pictures/2015/8/18/1439900836746/9e43bef2-d7c7-4a97-a1bc-93636ce361a7-620x372.jpeg?w=620&q=85&auto=format&sharp=10&s=7f9bd5cd72f68f040252a9dca512778c" alt="'This design is total rubbish': Preston's majestic bus station gets a zombie makeover" class=""> </div> <div class="box-item"> <div class="box-post"> <span class="label label-success"> <a href="#" rel="tag">Tech</a> </span> <h1 class="post-title"> <a href="#"> Why Apple shouldn’t be selling a 16GB iPhone 6S or 6S Plus </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> <img src="https://i.guim.co.uk/img/media/bbf4a7d1df33ad2604638c03787e7eb0e1f17394/0_149_3000_1800/master/3000.jpg?w=700&q=85&auto=format&sharp=10&s=3ecfcbb58d169db2a27a9718e4689b83" alt="Why Apple shouldn’t be selling a 16GB iPhone 6S or 6S Plus" class=""> </div> <div class="box-item"> <div class="box-post"> <span class="label label-success"> <a href="#" rel="tag">Tech</a> </span> <h1 class="post-title"> <a href="#"> iPhone text message bug can crash Apple Watch, iPad and Mac too </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> <img src="https://i.guim.co.uk/img/static/sys-images/Guardian/Pix/pictures/2015/5/28/1432806359426/84fba44c-44eb-47b4-acf2-c02c5dd579b9-2060x1237.jpeg?w=700&q=85&auto=format&sharp=10&s=0c5743ab8796e6326e7257f3563727b5" alt="iPhone text message bug can crash Apple Watch, iPad and Mac too" class=""> </div> <div class="box-item"> <div class="box-post"> <span class="label label-success"> <a href="#" rel="tag">Travel</a> </span> <h1 class="post-title"> <a href="#"> Sailing off Iceland … is no holiday </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> <img src="https://i.guim.co.uk/img/static/sys-images/Guardian/Pix/pictures/2015/9/10/1441897683067/cbd64c76-4d4b-4fdc-b21e-09ee8c61fe84-2060x1371.jpeg?w=620&q=85&auto=format&sharp=10&s=902f73c53527356ce69674be7218a12b" alt="Sailing off Iceland is no holiday" class=""> </div> <div class="box-item"> <div class="box-post"> <span class="label label-success"> <a href="#" rel="tag">Travel</a> </span> <h1 class="post-title"> <a href="#"> Online Gothenburg: tech travel tips </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> <img src="https://i.guim.co.uk/img/media/45532d8551c9033d4bc18abf7adfc5ee29405fff/0_928_3220_1932/master/3220.jpg?w=700&q=85&auto=format&sharp=10&s=776a7ea32d0c2df42d8470d4cc210bfe" alt="Online Gothenburg: tech travel tips" class=""> </div> <div class="box-item"> <div class="box-post"> <span class="label label-success"> <a href="#" rel="tag">Travel</a> </span> <h1 class="post-title"> <a href="#"> Online Gothenburg: tech travel tips </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> <img src="https://i.guim.co.uk/img/media/5563b9b5cd87bab2e9c9279a8f0c7268b69471bc/0_172_5616_3368/master/5616.jpg?w=700&q=85&auto=format&sharp=10&s=7a9664aabfe4b691120166f61759ba68" alt="Explore Lyon: essential travel apps and tips" 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; }

Related: See More


Questions / Comments: