<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <div class="col-xs-12 img-outer" style="margin: 20px 0;"> <div class="hovereffect"> <div class="z-text"> <h2>Hover effect 1v2</h2> <a href="http://www.multichannelcreative.co.uk/" target='_blank' class="btn btn-default">Click here</a> </div> <div class="z-img"> <img class="img-responsive" src="http://goodmorningpost.com/wp-content/uploads/2014/04/10-15-2012-2-22-52-PM-300x300.png" alt=""> </div> </div> </div>

.hovereffect{ height: 177px; margin: auto; overflow: hidden; width: 300px; transition: all 1s ease 0s; } .z-img{ position: relative; height: 176px; border: 1px solid black; width: 300px; } .z-img img{ width: 100%; height: 100%; transition: all 0.6s ease 0s; } .hovereffect:hover .z-img img{ transform: scale(1.9); } .z-text{ background: rgba(0, 0, 0, 10); position: absolute; width: 300px; height: 176px; border: 1px solid gray; top: -199px; z-index: 1111; display: none; color: white; text-align: center; padding: 10px; border: 1px solid white; }

$(document).ready(function(){ $('.hovereffect').hover(function () { $(this).children('.z-text').css('top', '0').fadeToggle(600); }); });