<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="row"> <h2>box over lay</h2> </div> <div class="row"> <div class="col-md-4"> <div class="card"> <h5>HOVER ON ME!</h5> <div class="overlay"> <h4>OVERLAY</h4> </div> </div> </div> <div class="col-md-4"> <div class="card-2"> <h5>HOVER ON ME!</h5> <div class="overlay"> <h4>OVERLAY</h4> </div> </div> </div> <div class="col-md-4"> <div class="card-3"> <h5>HOVER ON ME!</h5> <div class="overlay"> <h4>OVERLAY</h4> </div> </div> </div> </div> </div>

body{ padding:60px;margin:0; } h2{ text-align:center; width:100%; text-transform:uppercase; margin:0 0 50px 0; } .card, .card-2, .card-3{ position:relative; width:auto; height:300px; background:#fff; border:1px solid #ccc; box-sizing:border-box; overflow:hidden; } .card h5, .card-2 h5, .card-3 h5{ color:#333; text-align:center; display:block; -webkit-vertical-align:middle; padding:140px 0; } .card .overlay{ content:""; position:absolute; top:300px; left:0px; background:#00000090; width:100%; height:100%; color:#fff; transition:.75s linear; transform:scale(0); } .card-2 .overlay{ content:""; position:absolute; top:0px; right:0; bottom:0; left:0px; background:#00000090; width:100%; height:100%; color:#fff; transition:.75s linear; transform:scale(0); } .card-3 .overlay{ content:""; position:absolute; top:100%; left:0px; background:#00000090; width:100%; height:100%; color:#fff; transition:.75s linear; } .card .overlay h4, .card-2 .overlay h4, .card-3 .overlay h4{ content:""; position:absolute; top:50%; left:0; right:0; bottom:0; width:100%; height:100%; color:#fff; transform:translateY(-5%); text-align:center; } .card:hover .overlay{ top:0px; transition:.75s linear; transform:scale(1); } .card-2:hover .overlay{ transition:.75s linear; transform:scale(1); } .card-3:hover .overlay{ transition:.75s linear; top:0; }