<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="userapp"> <ul> <li class="active"> <div class="usercontent"> <img src="images/dateicon.png" width="52" alt="date"> <h2>26</h2> <p>años de<br> trayectoria</p> </div> </li> </ul> </div> </div>

.userapp { width: 100%; text-align: center; margin-top: 35px; } ul li { list-style: none; padding: 0px; margin: 0px; } .userapp li { width: 25%; float: left; background: #eeeeee; padding: 30px; } .userapp li .usercontent { display: block; padding: 15px 2px; } .userapp li .usercontent h2 { font-family: 'robotobold'; font-size: 40px; margin-top: 15px; } .userapp li .usercontent p { text-align: center; font-size: 18px; text-transform: uppercase; line-height: 22px; color: #2a2a2a; padding-top: 5px; } .userapp li:hover .usercontent { background: #f3f3f3; } .userapp li:hover { background:#000 url(../images/dateback.jpg) no-repeat; background-size: cover; }