<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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-4 col-sm-4 col-xs-6 shine_me"> <a href="#"> <img src="http://lorempixel.com/output/food-q-c-320-240-2.jpg" class="img-responsive"/> <div class="col-md-4 col-sm-4 col-xs-6 button-group"> Edit </div> </a> </div> </div> </div>

.shine_me{ cursor:pointer; margin-bottom:10px; } .shine_me:hover .shine_effect { position: absolute; opacity: 0; top: 0; left: 0; } a .button-group{ border:1px solid red; display: none; width:100%; height:20px; top:-20px; } a img:hover .button-group{ display:block; }