<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-6 countrygrid"> <div class="country-data"> <div class="country-content"> <span class="label label-success"> Africa </span> <h1 class="country-name"> <a href="#"> Kenya </a> </h1> <div class="row"> <div class="col-md-8 pull-left"> <span class="countrystats"> <span><i class="glyphicon glyphicon-time"></i> <a href="">30 Wildlife destinations</a></span> <span><i class="glyphicon glyphicon-time"></i> 1.5M yearly travellers</span> </span> <span class="countrystats"> <span><i class="glyphicon glyphicon-time"></i> Sep 15, 2015</span> <span><i class="glyphicon glyphicon-time"></i> Sep 15, 2015</span> </span> </div> <div class ="col-md-2 col-sm-2 pull-right"> <button type="button" class="btn btn-success btn-responsive countryselect"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button> </div> </div> </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> <div class="col-md-6 countrygrid"> <div class="country-data"> <div class="country-content"> <span class="label label-success"> Africa </span> <h1 class="country-name"> <a href="#"> Kenya </a> </h1> <span class="countrystats"> <span><i class="glyphicon glyphicon-time"></i> <a href="">30 Wildlife destinations</a></span>&nbsp&nbsp <span><i class="glyphicon glyphicon-time"></i> 1.5M yearly travellers</span>&nbsp&nbsp </span> <span class="countrystats"> <span><i class="glyphicon glyphicon-time"></i> Sep 15, 2015</span>&nbsp&nbsp <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> <div class="col-md-6 countrygrid"> <div class="country-data"> <div class="country-content"> <span class="label label-success"> Africa </span> <h1 class="country-name"> <a href="#"> Tanzania </a> </h1> <span class="countrystats"> <span><i class="glyphicon glyphicon-time"></i> <a href="">30 Wildlife destinations</a></span>&nbsp&nbsp <span><i class="glyphicon glyphicon-time"></i> 1.5M yearly travellers</span>&nbsp&nbsp <span><i class="glyphicon glyphicon-time"></i> Sep 15, 2015</span>&nbsp&nbsp <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> <div class="col-md-6 countrygrid"> <div class="country-data"> <div class="country-content"> <span class="label label-success"> Africa </span> <h1 class="country-name"> <a href="#"> Tanzania </a> </h1> <span class="countrystats"> <span><i class="glyphicon glyphicon-time"></i> <a href="">30 Wildlife destinations</a></span>&nbsp&nbsp <span><i class="glyphicon glyphicon-time"></i> 1.5M yearly travellers</span>&nbsp&nbsp <span><i class="glyphicon glyphicon-time"></i> Sep 15, 2015</span>&nbsp&nbsp <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> </div> <!-- /row --> </div> <!-- /container -->

@media (max-width: 768px) { .btn-responsive { font-size:11px; padding:4px 6px; } } @media (min-width: 768px) { .btn-responsive { font-size:12px; padding:6px 12px; } } @media (min-width: 992px) { .btn-responsive { font-size:14px; padding:8px 12px; } } @media (min-width: 1200px) { .btn-responsive { padding:10px 16px; font-size:18px; } } .countrygrid{padding:0;} .country-data { float: left; opacity: 1; overflow: hidden; position: relative; } .country-data img { width: 100%; } .country-data a,span{color:#FFF;} .country-data .country-content span.countrystats { font-family: sans-serif; font-size: 12px; color: #fff; margin-top: 15px; display: block; } .country-data .country-content span.countrystats span { margin-right: 15px; } .country-data .country-content { 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 .country-content h1..country-name { font-size:10pt; }