<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="img_block"> <a href="#" class="content_block"><img src="http://placehold.it/250x250" /> <div class="over_block"></div> <span>ВАШ ТЕКСТ ЗДЕСЬ :)</span> </a> </div>

.img_block .content_block { width:250px; height: 250px; background:#f6f6f6; text-align:center; min-height:250px; font-family: 'Roboto', sans-serif; font-weight:400; border-width: 4px; border-style: solid; border-color: #DDDDDD; box-shadow: 10px 10px 6px -6px #777777; } .img_block a.content_block { display:block; position: relative; overflow:hidden; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; cursor:pointer; } .img_block a.content_block .over_block { background-color:rgba(0, 160, 150, 0); width:100%; height:100%; position:absolute; top:0; left:0; z-index: 9900; -moz-transition:all 1s; -webkit-transition:all 1s; -o-transition:all 1s; transition:all 1s; } .img_block a.content_block:hover .over_block { display:block; background-color:rgba(0, 160, 150, 0.7); } .img_block a.content_block span { background: rgba(0, 92, 44, 0.5); width:100%; height:0px; text-transform:uppercase; font-size:11px; line-height:60px; position:absolute; display:block; bottom:0px; left:0; z-index: 9910; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s; transition: all .4s; } .img_block a.content_block:hover span { bottom:0; height:60px; color: #ffffff; }