Подробное описание и демонстрацией работы эффекта наведения под номером №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; }
}