<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><div class="container"> <div class="row"> <div class="col-lg-4 botm-margn "> <div class="transperent_block " style="background-color:#cccccc;"> <img src="http://i613.photobucket.com/albums/tt213/boakye51/fw_al_007_03_zpsfwzueotz.jpg" class="img-responsive" alt=""> <div class="black_hover_block"> <div class="blur"></div> <div class="black_hover_block_text"> <h4 class="bg-dark">RAHUL MEHTA</h4> <p>Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor...</p> <a class=" btn btn-default btn-sm btn-pink" href="#">READ MORE</a> </div> </div> </div> </div> </div>

.bg_black{ background:#000; } .transperent_block { padding: 0px; position: relative; overflow: hidden; height: 250px; } .transperent_block img { width:100%; height: 100%; } .transperent_block:hover .black_hover_block { opacity: 1; transform: translateY(-150px); -webkit-transform: translateY(-150px); -moz-transform: translateY(-150px); -ms-transform: translateY(-150px); -o-transform: translateY(-150px); } .transperent_block img { z-index: 4; } .transperent_block .black_hover_block { position: absolute; bottom: 3%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; width: 100%; } .transperent_block:hover .black_hover_block, .black_hover_block:hover { bottom: 30%; transition: all 0.3s ease-in-out; } .transperent_block .blur { background-color: rgba(0,0,0,0.7); height: 400px; z-index: 5; position: absolute; width: 100%; } .transperent_block .black_hover_block_text { z-index: 10; color: #fff; position: absolute; height: 400px; text-align: center; top: -20px; width: 100%; } .btn-pink { background-color: #77132f; color: #fff; border: 4px solid #77132f; } .btn-pink:hover{ color: #fff; background-color: #6f0f2a9e; border: 4px solid #6f0f2a4e; } .btn-sm { margin-top: 10px; }