<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-3d-doors"> <div class="back-image"> <img src="http://storage1.static.itmages.ru/i/15/0627/h_1435431990_9882131_c46b482909.jpg" width="500" alt="California surf"> </div> <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> Facebook </a> <a href="#" class="share-button share-via-twitter"> <i class="fa fa-twitter"></i> Twitter </a> <div class="white-line"></div> <div class="left-door"> <div class="image-left"> <img src="http://storage1.static.itmages.ru/i/15/0627/h_1435431990_9882131_c46b482909.jpg" width="500" alt="California surf"> </div> </div> <div class="right-door"> <div class="image-right"> <img src="http://storage1.static.itmages.ru/i/15/0627/h_1435431990_9882131_c46b482909.jpg" width="500" alt="California surf"> </div> </div> </div> </div> </div>

.container{ text-align: center; font: bold 14px sans-serif; } .image-effect-3d-doors{ width: 500px; height: 300px; position: relative; margin: 0 auto; -webkit-perspective: 500px; perspective: 500px; } .back-image{ position: absolute; left: 0; top:0; -webkit-filter: blur(1px) grayscale(100%); width: 100%; height: 300px; overflow: hidden; -webkit-transition: 0.7s; transition: 0.7s; -webkit-transform: scale(1.07); transform: scale(1.07); } .image-effect-3d-doors:hover .back-image{ box-shadow: none; -webkit-transform: scale(1); transform: scale(1); } .image-effect-3d-doors .left-door{ position: absolute; display: inline-block; left: 0; top:0; -webkit-transform-origin: center left; transform-origin: center left; -webkit-transition: 0.7s ease-out; transition: 0.7s ease-out; z-index: 10; } .image-effect-3d-doors:hover .left-door{ -webkit-transform: rotateY(-180deg) scale3d(0.6, 1, 100); transform: rotateY(-180deg) scale3d(0.6, 1, 100); } .image-effect-3d-doors .right-door{ position: absolute; display: inline-block; left: 250px; top:0; -webkit-transform-origin: center right; transform-origin: center right; -webkit-transition: 0.7s ease-out; transition: 0.7s ease-out; z-index: 10; } .image-effect-3d-doors:hover .right-door{ -webkit-transform: rotateY(180deg) scale3d(0.6, 1, 100); transform: rotateY(180deg) scale3d(0.6, 1, 100); } .image-effect-3d-doors .image-left, .image-effect-3d-doors .image-right{ width: 250px; height: 300px; overflow: hidden; -webkit-transition: 0.7s; transition: 0.7s; } .image-effect-3d-doors .image-right img{ margin-left: -250px; } .image-effect-3d-doors:hover .image-left, .image-effect-3d-doors:hover .image-right{ -webkit-filter: blur(2px); } .image-effect-3d-doors .share-button{ display: inline-block; text-decoration: none; color: #ffffff; padding: 12px; width: 90px; border-radius: 2px; margin: 125px 10px; position: relative; z-index: 5; -webkit-transition: 0.5s; transition: 0.5s; opacity: 0; } .image-effect-3d-doors:hover .share-button{ -webkit-transition-delay: 0.6s; transition-delay: 0.6s; opacity: 1; } .share-via-vk{ background-color:#4C75A3; } .share-via-facebook{ background-color:#3b5998; } .share-via-twitter{ background-color:#00aced; } .image-effect-3d-doors .white-line{ border-bottom: 2px solid #fff; top: 190px; left:250px; position: absolute; z-index: 5; width: 0; -webkit-transition: 0.7s; transition: 0.7s; } .image-effect-3d-doors:hover .white-line{ transform: translateX(-200px); -webkit-transform: translateX(-200px); width: 400px; -webkit-transition-delay: 0s; transition-delay: 0s; }