
Подробное описание и демонстрацией работы эффекта наведения под номером №42 для бибилиотеки Bootstrap. Html и CSS код для реализации hover effect как на изображении.
Демонстрация эффекта наведения — стиль 42



<div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="box"> <img src="https://fokit.ru/demo/images/hover-effect/hover-effect-style-42/img-1.jpg" alt=""> <div class="box-icons"> <ul class="social-links"> <li><a href="#" class="fab fa-facebook"></a></li> <li><a href="#" class="fab fa-google"></a></li> <li><a href="#" class="fab fa-twitter"></a></li> <li><a href="#" class="fab fa-instagram"></a></li> <li><a href="#" class="fab fa-pinterest"></a></li> <li><a href="#" class="fab fa-linkedin"></a></li> <li><a href="#" class="fab fa-youtube"></a></li> </ul> </div> </div> </div> </div> </div>css разметка для реализации данного эффекта
.box{ position: relative; box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3); overflow: hidden; } .box img{ width: 100%; height: auto; transform: translateX(0); transition: all 0.3s ease 0s; } .box:hover img{ transform: translateX(10px); } .box .box-icons{ position: absolute; top: 0; left: 0; width: 35px; height: 100%; background: #fff; transform-origin: left center 0; transform: perspective(400px) rotateY(90deg); transition: all 0.3s ease 0s; } .box:hover .box-icons{ transform: perspective(400px) rotateY(0deg); } .box .social-links{ padding: 0; margin: 0; background: #fff; } .box .social-links li{ list-style: none; } .box .social-links li a{ display: block; background: #fff; color: #a1a1a1; padding: 12px; text-align: center; transition: all 0.3s ease 0s; } .box .social-links li a:hover{ color:#fff; } .box .social-links li .fa-facebook:hover{ background: #365899; } .box .social-links li .fa-google:hover{ background: #ea4335; } .box .social-links li .fa-twitter:hover{ background: #00aced; } .box .social-links li .fa-instagram:hover{ background: #458eff; } .box .social-links li .fa-pinterest:hover{ background: #c90000; } .box .social-links li .fa-linkedin:hover{ background: #0077b5; } .box .social-links li .fa-youtube:hover{ background: #d62424; } @media only screen and (max-width:1200px){ .box .social-links li a{ padding:9px; } } @media only screen and (max-width: 990px) { .box{ margin-bottom:15px; } } @media only screen and (max-width: 359px) { .box .social-links li a{ padding:8px; } }