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


<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-33/img-1.jpg" alt=""/> <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> </ul> </div> </div> </div> </div>css разметка для реализации данного эффекта
.box{ overflow: hidden; position: relative; box-shadow:0 0 5px #bebebe; } .box img{ width:100%; height:auto; } .box .social-links{ position:absolute; top:-100%; right:0; height: 100%; margin:0; padding: 5px; background:#2e2e2e; transition: top 0.50s linear 0s; } .box:hover .social-links{ top:0px; } .box .social-links li{ list-style: none; margin-bottom: 10px; } .box .social-links li:last-child{ margin-bottom: 0; } .box .social-links li a{ color:#fff; background:#000; font-size:21px; display: block; padding:12px; text-align: center; } .box .social-links li a.fa-facebook:hover{ background:#3b5998; } .box .social-links li a.fa-google:hover{ background:#942e32; } .box .social-links li a.fa-twitter:hover{ background:#3B88C3; } .box .social-links li a.fa-instagram:hover{ background:#007bb6; } @media only screen and (max-width:990px) { .box{ margin-bottom:20px; } .box .social-links li a{ padding:10px; } } @media only screen and (max-width:479px) { .box .social-links li a{ font-size: 15px; } }