<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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-fluid row" style="padding: 0;margin: 0;"> <ul class="list_mng"> <li> <div class="mng_hover"> <p>Start Bootstrap can help you build better websites using the Bootstrap</p> <div> <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span> <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span> <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span> <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span> </div> </div> <div class="mng_block"> <a href="" class="mng_link"> <img class="img-fluid" src="https://bootstrapmade.com/demo/themes/eStartup/img/team/1.jpg" alt=""> </a> <div class="desc">Car 1</div> </div> </li> <li> <div class="mng_hover"> <p>Start Bootstrap can help you build better websites using the Bootstrap</p> <div> <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span> <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span> <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span> <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span> </div> </div> <div class="mng_block"> <a href="" class="mng_link"> <img class="img-fluid" src="https://bootstrapmade.com/demo/themes/eStartup/img/team/1.jpg" alt=""> </a> <div class="desc">Car 2</div> </div> </li> <li> <div class="mng_hover"> <p>Start Bootstrap can help you build better websites using the Bootstrap</p> <div> <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span> <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span> <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span> <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span> </div> </div> <div class="mng_block"> <a href="" class="mng_link"> <img class="img-fluid" src="https://bootstrapmade.com/demo/themes/eStartup/img/team/1.jpg" alt=""> </a> <div class="desc">Car 3</div> </div> </li> <li> <div class="mng_hover"> <p>Start Bootstrap can help you build better websites using the Bootstrap</p> <div> <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span> <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span> <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span> <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span> </div> </div> <div class="mng_block"> <a href="" class="mng_link"> <img class="img-fluid" src="https://bootstrapmade.com/demo/themes/eStartup/img/team/1.jpg" alt=""> </a> <div class="desc">Car 4</div> </div> </li> <li> <div class="mng_hover"> <p>Start Bootstrap can help you build better websites using the Bootstrap</p> <div> <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span> <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span> <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span> <span> <i class="fas fa-phone fa-3x mb-3 sr-contact-1"></i></span> </div> </div> <div class="mng_block"> <a href="" class="mng_link"> <img class="img-fluid" src="https://bootstrapmade.com/demo/themes/eStartup/img/team/1.jpg" alt=""> </a> <div class="desc">Car 5</div> </div> </li> </ul> </div>

ul.list_mng { list-style: none; margin: 0; padding: 0; width: 100%; } .list_mng li { width: 20%; float: left; } .mng_link img { filter: grayscale(100%); min-height: 200px; } .list_mng li:hover .mng_link img{ -webkit-filter: grayscale(0%); filter: grayscale(0%); } .desc { background-color: #757598; padding: 10px 15px; color: #fff; } .list_mng li:hover .desc { background-color: #a2a268; } .mng_hover { background-color: #a4b5a4; padding: 20px 25px; text-align: center; display: inline-block; opacity: 0; } .list_mng li:hover .mng_hover { opacity: 1; } .mng_hover p { font-size: 12px; text-align: center; margin-bottom: 30px; } .mng_hover div span i { font-size: 15px; margin-right: 10px; }