<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="col-md-3"> <div class="box"></div> <div class="box1"></div> </div> <div class="col-md-3"> <div class="box"></div> <div class="box1"></div> </div> <div class="col-md-3"> <div class="box"></div> <div class="box1"></div> </div> <div class="col-md-3"> <div class="box"></div> <div class="box1"></div> </div> </div> </div>

.col-md-3{ overflow:hidden; margin-top:20px; } .box{ width:100%; height:200px; background-color:red; } .box1{ width:90%; height:200px; background-color:blue; position:absolute; top:200px; transition:ease-in-out 1s; } .col-md-3:hover .box1{ top:0px; }