<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="container"> <div class="row"> <div class="image-effect-border"> <div class="share-layer"> <a href="#" class="share-button share-via-vk"> <i class="fa fa-vk"></i> Вк </a> <a href="#" class="share-button share-via-facebook"> <i class="fa fa-facebook"></i> Fb </a> <a href="#" class="share-button share-via-twitter"> <i class="fa fa-twitter"></i> Twitter </a> </div> <div class="image-layer"> <img src="http://storage1.static.itmages.ru/i/15/0627/h_1435433406_1759491_c896b21dcf.jpg" width="500" alt="California surf"> </div> </div> </div> </div>

@import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css); .container{ text-align: center; font: bold 14px sans-serif; } .image-effect-border { width: 500px; height: 300px; overflow: hidden; position: relative; border: 5px solid #DDD; margin: 0 auto; background-color: rgba(0,0,0,0.1); -webkit-transition: 1s; transition: 1s; } .image-effect-border:hover{ box-shadow: 0 0 5px 2px rgba(0,0,0,0.4); border: 5px solid #444; } .image-effect-border .image-layer{ position: absolute; top:0; left:0; height: 300px; overflow: hidden; -webkit-transition: 0.4s ease; transition: 0.4s ease; -webkit-transform: scale(1.1); transform: scale(1.1); z-index: 5; } .image-effect-border:hover .image-layer{ -webkit-transform: scale(1); transform: scale(1); } .share-layer{ position: absolute; top:0; left: 0; background-color: rgba(0,0,0,0.4); width: 100%; height: 100%; opacity: 0; -webkit-transition: 0.4s; transition: 0.4s; z-index: 10; } .image-effect-border:hover .share-layer{ opacity: 1; } .share-button{ display: inline-block; text-decoration: none; color: #ffffff; padding: 12px; width: 90px; border-radius: 2px; margin: 125px 10px; } .share-button:hover{ color: #ffffff; text-decoration: none; } .share-via-vk{ background-color:#4C75A3; } .share-via-facebook{ background-color:#3b5998; } .share-via-twitter{ background-color:#00aced; }