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

html разметка для реализации данного эффекта

<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css /> -->
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="box">
<svg  class="curve1" x="0px" y="0px" viewBox="0 0 400 200" >
<path d="M398.938,143.806c-24.004,26.063-155.373,104.33-224.724,7.328 C69.626,4.846,0.5,71.583,0.5,71.583V1.5h398.629L398.938,143.806z"/>
</svg>
<img src="https://fokit.ru/demo/images/hover-effect/hover-effect-style-210/img-1.jpg" alt="">
<div class="box-content">
<h3 class="title">Williamson</h3>
<span class="post">Web Designer</span>
<ul class="icon">
<li><a href="#"><i class="fa fa-search"></i></a></li>
<li><a href="#"><i class="fa fa-link"></i></a></li>
</ul>
</div>
<svg  class="curve2" x="0px" y="0px" width="150px" height="150px" viewBox="0 0 150 50"  >
<path d="M1.114,7.567C87.544-33.817,150,150.5,150,150.5H1.361L1.114,7.567z" />
</svg>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="box">
<svg  class="curve1" x="0px" y="0px" viewBox="0 0 400 200" >
<path d="M398.938,143.806c-24.004,26.063-155.373,104.33-224.724,7.328 C69.626,4.846,0.5,71.583,0.5,71.583V1.5h398.629L398.938,143.806z"/>
</svg>
<img src="https://fokit.ru/demo/images/hover-effect/hover-effect-style-210/img-2.jpg" alt="">
<div class="box-content">
<h3 class="title">Steve Thomas</h3>
<span class="post">Web Developer</span>
<ul class="icon">
<li><a href="#"><i class="fa fa-search"></i></a></li>
<li><a href="#"><i class="fa fa-link"></i></a></li>
</ul>
</div>
<svg  class="curve2" x="0px" y="0px" width="150px" height="150px" viewBox="0 0 150 50"  >
<path d="M1.114,7.567C87.544-33.817,150,150.5,150,150.5H1.361L1.114,7.567z" />
</svg>
</div>
</div>
</div>
</div>

css разметка для реализации данного эффекта

.demo{ background-color: #e7e7e7; }
.box{
font-family: 'Roboto', sans-serif;
border-radius: 5px;
overflow: hidden;
position: relative;
z-index: 1;
transition: all 0.3s ease 0s;
}
.box:hover{ box-shadow: 0 0 20px rgba(0,0,0,0.5); }
.box .curve1{
opacity: 0;
position: absolute;
right: -2px;
top: -100%;
z-index: 1;
transition:all 0.3s ease-in-out;
}
.box:hover .curve1{
opacity: 1;
top: -1%;
}
.box path{ fill:rgba(255,255,255,0.8); }
.box img{
width: 100%;
height: auto;
transition: all 0.3s ease 0s;
}
.box:hover img{ filter: blur(2px) grayscale(100%); }
.box .box-content{
color: #FC427B;
text-align: right;
width: 100%;
height: 100%;
position: absolute;
right: 15px;
top: 15px;
z-index: 2;
}
.box .title{
font-size: 22px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0;
opacity: 0;
transform: translateX(100%);
transition: all 0.5s ease 0.2s;
}
.box .post{
color: #000;
font-size:14px;
letter-spacing: 1px;
text-transform: capitalize;
margin:0 2px 5px 0;
opacity: 0;
display: block;
transform: translateX(-20%);
transition: all 0.5s ease 0.2s;
}
.box .icon{
list-style: none;
text-align: right;
padding: 0;
margin: 0;
opacity: 0;
transform: translateX(100%);
transition: all 0.5s ease 0.2s;
}
.box:hover .title,
.box:hover .post,
.box:hover .icon{
opacity: 1;
transform: translateX(0);
}
.box .icon li{
margin: 0 2px;
display: inline-block;
}
.box .icon li a{
color: #FC427B;
font-size: 17px;
text-align: center;
line-height: 32px;
height: 35px;
width: 35px;
border: 2px solid #FC427B;
border-radius: 50%;
display: block;
transition: all 0.3s;
}
.box .icon li a:hover{
color: #fff;
background-color: #FC427B;
border-color: #fff;
box-shadow: 0 0 5px #000;
}
.box .curve2{
opacity: 0;
position: absolute;
left: -2px;
bottom: -100%;
transition:all 0.3s ease-in-out;
}
.box:hover .curve2{
opacity: 1;
bottom: -2px;
}
@media only screen and (max-width:990px){
.box{ margin-bottom: 30px; }
}
@media only screen and (max-width:479px){
.box .title{ font-size: 18px; }
}

Теги: