<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <section> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="box"> <div class="imgbox"> <img src="https://place-hold.it/400x500" class="img-responsive"> </div> <div class="content"> <h3>Hardik Trivedi</h3> <p>Please Like press like button and post your comment below</p> <a href="javascript void(0)" class="btn btn-default btnD">Read More</a> </div> </div> </div> <div class="col-sm-4"> <div class="box"> <div class="imgbox"> <img src="https://place-hold.it/400x500" class="img-responsive"> </div> <div class="content"> <h3>Hardik Trivedi</h3> <p>Please Like press like button and post your comment below</p> <a href="javascript void(0)" class="btn btn-default btnD">Read More</a> </div> </div> </div> <div class="col-sm-4"> <div class="box"> <div class="imgbox"> <img src="https://place-hold.it/400x500" class="img-responsive"> </div> <div class="content"> <h3>Hardik Trivedi</h3> <p>Please Like press like button and post your comment below</p> <a href="javascript void(0)" class="btn btn-default btnD">Read More</a> </div> </div> </div> </div> </div> </div> </section>

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed'); body { margin: 0; padding: 0; font-family: 'Roboto Condensed', sans-serif; } section { padding: 120px 0 0; } .box { position: relative; width: 100%; height: 400px; overflow: hidden; border-radius: 10px; background: #000; box-shadow: 0 5px 15px rgba(0,0,0,.5); transition: .5s; margin-bottom: 35px; } .box:hover { transform: translateY(-30px); box-shadow: 0 50px 50x rgba(0,0,0,.5); } .box .imgbox { position: relative; } .box .imgbox img { transition: .5s; } .box:hover .imgbox img { opacity: .5; transform: translateY(-40px); } .box .content { position: absolute; bottom: -40px; left: 0; padding: 20px; box-sizing: border-box; transition: .5s; opacity: 0; } .box:hover .content { opacity: 1; bottom: 0; } .box .content h3 { font-size: 48px; color: #fff; font-weight: 700; } .box .content p { font-size: 18px; color: #fff; font-weight: 400; } .box .content .btnD { border: none; background: #ff0000; color: #fff; font-size: 18px; padding: 10px 20px; font-weight: 700; transition: .5s; } .box .content .btnD:hover { background: #ff3232; }