<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-xs-12 col-sm-12 col-md-6 col-1g-6"> <div class="row grand-mosaicos"> <a href="http://gestionterritorio.cl/contencion-social/"><div class="image-wrapper"><img class="img-responsive" src="http://gestionterritorio.cl/wp-content/uploads/2015/12/contencion_social_serv_ok.jpg" alt="Contención Social" /><p>Contención<br> social <i class="fa fa-plus"></i></p></div></a> </div> </div> <div class="col-xs-12 col-sm-12 col-md-6 col-1g-6"> </div> </div> </div>

.image-wrapper { position: relative; } .image-wrapper p { position: absolute; left: 0; bottom: 0px; padding: 3px 5px 3px 10px; background-color: #ffffff; width: 55%; color: #000000; font-weight: 400; font-family: 'Open Sans', sans-serif; font-size: 26px; font-weight: 800; line-height: 1.2; } .image-wrapper .fa { float: right; padding: 5px 7px; border-radius: 50%; border: 3px solid #000000; font-size: 60%; } .wrapper-med .image-wrapper p { width: 98%; font-size: 20px; }