<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="three"> <div class="image-wrap"> <img src="http://www.fleewinter.com/wp-content/uploads/2017/08/Praia-dos-Carneiros-1-500x400.jpg" alt="" /> <div class="absolut-onhover"> <div class="vertical-align"> <h5>support</h5> <a href="#" class="btn btn-info">Explore</a> </div> </div> </div> </div> <div class="three"> <div class="image-wrap"> <img src="http://www.fleewinter.com/wp-content/uploads/2017/08/Praia-dos-Carneiros-1-500x400.jpg" alt="" /> <div class="absolut-onhover"> <div class="vertical-align"> <h5>support</h5> <a href="#" class="btn btn-info">Explore</a> </div> </div> </div> </div> <div class="three"> <div class="image-wrap"> <img src="http://www.fleewinter.com/wp-content/uploads/2017/08/Praia-dos-Carneiros-1-500x400.jpg" alt="" /> <div class="absolut-onhover"> <div class="vertical-align"> <h5>support</h5> <a href="#" class="btn btn-info">Explore</a> </div> </div> </div> </div> <div class="three"> <div class="image-wrap"> <img src="http://www.fleewinter.com/wp-content/uploads/2017/08/Praia-dos-Carneiros-1-500x400.jpg" alt="" /> <div class="absolut-onhover"> <div class="vertical-align"> <h5>support</h5> <a href="#" class="btn btn-info">Explore</a> </div> </div> </div> </div> <div class="three"> <div class="image-wrap"> <img src="http://www.fleewinter.com/wp-content/uploads/2017/08/Praia-dos-Carneiros-1-500x400.jpg" alt="" /> <div class="absolut-onhover"> <div class="vertical-align"> <h5>support</h5> <a href="#" class="btn btn-info">Explore</a> </div> </div> </div> </div> <div class="three"> <div class="image-wrap"> <img src="http://www.fleewinter.com/wp-content/uploads/2017/08/Praia-dos-Carneiros-1-500x400.jpg" alt="" /> <div class="absolut-onhover"> <div class="vertical-align"> <h5>support</h5> <a href="#" class="btn btn-info">Explore</a> </div> </div> </div> </div>

*{transition:all .5s ease;-moz-transition:all .5s ease;-webkit-transition:all .5s ease} .three{width:33.3333%;float:left;text-align: center;} .three img{width:100%;} .image-wrap{width:100%; float:left;height:243px;overflow:hidden;position:relative;} .absolut-onhover h5{margin:0px;padding:10px 0px;color:#ff6600;font-size:22px; line-height:30px;text-transform:capitalize;} .absolut-onhover { background: rgba(0,0,0,.8); width: 100%; height: 100%; position: absolute; top: 80%; left: 0; padding:0 0px; text-align: center; } .image-wrap .vertical-align { top:45px; position: absolute; left: 50%; transform: translateX(-50%) translateY(-50%); } .image-wrap:hover .absolut-onhover{top:0px;} .image-wrap:hover .vertical-align{top:50%;}