Подробное описание и демонстрацией работы эффекта наведения под номером №8 для бибилиотеки Bootstrap. Html и CSS код для реализации hover effect как на изображении.
html разметка для реализации данного эффекта
<div class="container"> <div class="row"> <div class="col-md-4"> <div class="box"> <div class="box-img"> <img src="https://fokit.ru/demo/images/hover-effect/hover-effect-style-8/img-1.jpg" alt=""/> </div> <div class="content"> <h3 class="title">web designing</h3> <ul class="links"> <li><a href="#" class="fa fa-link"></a> </li> <li><a href="#" class="fa fa-search"></a> </li> </ul> </div> </div> </div> </div> </div>css разметка для реализации данного эффекта
.box{
border:10px solid whitesmoke;
box-shadow: 0 0 5px grey;
overflow: hidden;
position: relative;
}
.box .box-img img{
width:100%;
height: auto;
transform:scale(1,1);
transition:transform 0.50s linear;
}
.box:hover .box-img img{
transform:scale(1.1,1.1);
}
.box .content{
background:rgba(255,255,255,0.8);
border:1px solid #bebbbb;
width: 100%;
height: 100%;
padding:35px 25px;
position: absolute;
top: 0;
text-align:center;
opacity:0;
transition:opacity 0.30s linear,border 0.20s ease-in-out;
}
.box:hover .content{
opacity:1;
border:8px solid #bebbbb;
}
.box .title{
font-size: 18px;
margin: 0;
position: relative;
text-transform: uppercase;
top: -2px;
transition: top 0.50s ease 0s,opacity 0.10s ease-in-out 0s;
}
.box .title:after{
content: "";
border-bottom: 2px solid #747474;
position: absolute;
top: 25px;
left: 34%;
border-radius:2px;
width:30%;
transform:rotateX(-180deg);
transition:width 1s ease-out 0s, transform 1s ease-in-out 0s,opacity 1s ease-out 0s;
}
.box:hover .title:after{
transform:rotate(180deg);
transition-delay:0.3s;
}
.box:hover .title{
top:45%;
}
.box .links{
position: relative;
bottom: -110%;
width: 100%;
margin: 0;
padding: 0;
transition: bottom 0.30s ease,opacity 0.30s ease;
}
.box .links li{
display:inline-block;
list-style: none;
margin-right:20px;
}
.box .links li a{
font-size: 17px;
color: #333;
}
.box:hover .links{
bottom:-70%;
}
.box .links li a:hover{
color:#e74c3c;
}
@media only screen and (max-width: 990px) {
.box{
margin-bottom:20px;
}
}