Hover Effect Style 107

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

Демонстрация эффекта наведения — стиль 107

Williamson

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id imperdiet odio. Maecenas a.

read more

Kristiana

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id imperdiet odio. Maecenas a.

read more

Steve Thomas

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id imperdiet odio. Maecenas a.

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

<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-107/img-1.jpg" alt=""/>
<div class="box-layer layer-1"></div>
<div class="box-layer layer-2"></div>
<div class="box-layer layer-3"></div>
<div class="box-content">
<h4 class="title">Williamson</h4>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id imperdiet odio. Maecenas a.</p>
<a class="read-more" href="#">read more</a>
</div>
</div>
</div>

<div class="col-md-4 col-sm-6">
<div class="box">
<img src="https://fokit.ru/demo/images/hover-effect/hover-effect-style-107/img-2.jpg" alt=""/>
<div class="box-layer layer-1"></div>
<div class="box-layer layer-2"></div>
<div class="box-layer layer-3"></div>
<div class="box-content">
<h4 class="title">Kristiana</h4>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id imperdiet odio. Maecenas a.</p>
<a class="read-more" href="#">read more</a>
</div>
</div>
</div>
</div>
</div>

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

.box{
text-align: center;
overflow: hidden;
position: relative;
}
.box img{
width: 100%;
height: auto;
}
.box:before,
.box:after,
.box .box-layer{
content: "";
width: 20%;
height: 100%;
background: rgba(2,25,89,0.7);
position: absolute;
top: 100%;
}
.box:hover:before,
.box:hover:after,
.box:hover .box-layer{
top: 0;
}
.box:before{
left: 0;
-o-transition: all 0.15s linear 0.2s;
-moz-transition: all 0.15s linear 0.2s;
-ms-transition: all 0.15s linear 0.2s;
-webkit-transition: all 0.15s linear 0.2s;
transition: all 0.15s linear 0.2s;
}
.box:hover:before{
-moz-transition-delay: 0s;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
.box:after{
left: 20%;
-o-transition: all 0.15s linear 0.25s;
-moz-transition: all 0.15s linear 0.25s;
-ms-transition: all 0.15s linear 0.25s;
-webkit-transition: all 0.15s linear 0.25s;
transition: all 0.15s linear 0.25s;
}
.box:hover:after{
-moz-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-ms-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.box .layer-1{
left: 40%;
-o-transition: all 0.15s linear 0.3s;
-moz-transition: all 0.15s linear 0.3s;
-ms-transition: all 0.15s linear 0.3s;
-webkit-transition: all 0.15s linear 0.3s;
transition: all 0.15s linear 0.3s;
}
.box:hover .layer-1{
-moz-transition-delay: 0.15s;
-webkit-transition-delay: 0.15s;
-o-transition-delay: 0.15s;
-ms-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.box .layer-2{
left: 60%;
-o-transition: all 0.15s linear 0.35s;
-moz-transition: all 0.15s linear 0.35s;
-ms-transition: all 0.15s linear 0.35s;
-webkit-transition: all 0.15s linear 0.35s;
transition: all 0.15s linear 0.35s;
}
.box:hover .layer-2{
-moz-transition-delay: 0.2s;
-webkit-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.box .layer-3{
left: 80%;
-o-transition: all 0.15s linear 0.4s;
-moz-transition: all 0.15s linear 0.4s;
-ms-transition: all 0.15s linear 0.4s;
-webkit-transition: all 0.15s linear 0.4s;
transition: all 0.15s linear 0.4s;
}
.box:hover .layer-3{
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.box .box-content{
width: 100%;
height: 0;
position: absolute;
top: 0;
left: 0;
background: transparent;
color: #fff;
padding-top: 7%;
overflow: hidden;
z-index: 1;
-moz-transform: rotate(-50deg) translate(-101px,291px);
-o-transform: rotate(-50deg) translate(-101px,291px);
-webkit-transform: rotate(-50deg) translate(-101px,291px);
-ms-transform: rotate(-50deg) translate(-101px,291px);
transform: rotate(-50deg) translate(-101px,291px);
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-o-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-ms-transition: all 0.3s linear 0s;
-webkit-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.box:hover .box-content{
height: 100%;
-moz-transform: rotate(0deg) translate(0px,0px);
-webkit-transform: rotate(0deg) translate(0px,0px);
-o-transform: rotate(0deg) translate(0px,0px);
-ms-transform: rotate(0deg) translate(0px,0px);
transform: rotate(0deg) translate(0px,0px);
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.box .title{
font-size: 21px;
font-weight: 700;
text-transform: uppercase;
border-bottom: 1px solid #fff;
padding-bottom: 20px;
margin-top: 20px;
}
.box .description{
font-size: 14px;
font-style: italic;
padding: 0 10px;
margin: 15px 0;
}
.box .read-more{
display: block;
width: 120px;
border-radius: 5px;
background: #e17a48;
font-size: 14px;
color: #fff;
text-transform: capitalize;
padding: 10px 0;
margin: 0 auto;
transition: all 0.3s ease 0s;
}
.box .read-more:hover{
background: #e06b32;
}
@media only screen and (max-width: 990px){
.box{ margin-bottom: 30px; }
}
@media only screen and (max-width: 479px){
.box .box-content{ padding-top: 0; }
.box .description{ margin: 7px 0; }
.box .read-more{ padding: 7px 0; }
}



Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *