Hover Effect Style 106

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

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

Williamson

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis scelerisque, odio id rutrum pulvinar.

Read More

Steve Thomas

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis scelerisque, odio id rutrum pulvinar.

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

<div class="demo">
<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-106/img-1.jpg" alt=""/>
<div class="box-content">
<h3 class="title">Williamson</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis scelerisque, odio id rutrum pulvinar.</p>
<a href="#" class="read-more">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-106/img-2.jpg" alt=""/>
<div class="box-content">
<h3 class="title">Kristiana</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis scelerisque, odio id rutrum pulvinar.</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>

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

body{ background: #212121; }
.box{
background: #053a5c;
overflow: hidden;
position: relative;
-webkit-transition: all 0.35s ease 0s;
transition: all 0.35s ease 0s;
}
.box img{
width: 100%;
height: auto;
-webkit-transition: all 0.35s ease 0.2s;
transition: all 0.35s ease 0.2s;
}
.box:hover img{
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation: loading-1 0.45s linear forwards;
animation: loading-1 0.45s linear forwards;
}
.box .box-content{
width: 100%;
padding: 0 30px;
color: #fff;
position: absolute;
top: 50%;
left: 0;
-webkit-transform: scale(0.5) translate(0%, -50%);
transform: scale(0.5) translate(0%, -50%);
-webkit-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
opacity: 0;
z-index: 1;
-webkit-transition: all 0.35s ease 0s;
transition: all 0.35s ease 0s;
}
.box:hover .box-content{
opacity: 1;
-webkit-transform: scale(1) translate(0, -50%);
transform: scale(1) translate(0, -50%);
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.box .title{
font-size: 24px;
font-weight: 800;
text-transform: uppercase;
margin: 0 0 10px 0;
}
.box .description{
font-size: 16px;
font-weight: 500;
margin: 0 0 15px;
}
.box .title,
.box .description{
line-height: 24px;
}
.box .read-more{
display: inline-block;
border: 2px solid #fff;
padding: 8px 16px;
font-size: 16px;
color: #fff;
-webkit-transition: all 0.35s ease 0s;
transition: all 0.35s ease 0s;
}
.box .read-more:hover{
background: #fff;
color: #053a5c;
}
@-webkit-keyframes loading-1{
50%{
-webkit-transform: scale(0.8) translateX(0%);
transform: scale(0.8) translateX(0%);
opacity: 0.5;
}
100%{
-webkit-transform: scale(0.8) translateX(-150%);
transform: scale(0.8) translateX(-150%);
opacity: 0.5;
}
}
@keyframes loading-1{
50%{
-webkit-transform: scale(0.8) translateX(0%);
transform: scale(0.8) translateX(0%);
opacity: 0.5;
}
100%{
-webkit-transform: scale(0.8) translateX(-150%);
transform: scale(0.8) translateX(-150%);
opacity: 0.5;
}
}
@media only screen and (max-width: 990px){
.box{ margin-bottom: 30px; }
}
@media only screen and (max-width: 360px){
.box .title{ font-size: 18px; }
.box .read-more{ padding: 3px 16px; }
}



Теги:
0

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

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