Hover Effect Style 98

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

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

willimson

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis augue in odio suscipit, at.

Read More

Steve Thomas

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis augue in odio suscipit, at.

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-98/img-1.jpg" alt=""/>
<div class="box-content">
<h4 class="title">willimson</h4>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis augue in odio suscipit, at.</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-98/img-2.jpg" alt=""/>
<div class="box-content">
<h4 class="title">Kristiana</h4>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis augue in odio suscipit, at.</p>
<a class="read-more" href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>

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

.box{
text-align: center;
overflow: hidden;
box-shadow: 0 0 5px #a3a3a3;
position: relative;
}
.box:before{
content: "";
width: 0;
height: 0;
background: rgba(33, 10, 3, 0.7);
position: absolute;
top: 0;
left: 0;
transition: all 0.3s linear 0.3s;
}
.box:hover:before{
width: 100%;
height: 100%;
transition-delay: 0s;
}
.box:after{
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 0;
right: 0;
border: 4px double #fff;
opacity: 0;
transition: all 0.3s linear 0.3s;
}
.box:hover:after{
width: 100%;
height: 100%;
opacity: 1;
transition-delay: 0s;
}
.box img{
width: 100%;
height: auto;
}
.box .box-content{
width: 100%;
height: 100%;
color: #fff;
padding-top: 25px;
position: absolute;
top: 0;
left: 0;
}
.box .title{
font-size: 21px;
font-weight: 700;
text-transform: uppercase;
border-bottom: 1px solid #fff;
padding-bottom: 20px;
margin-right: 4px;
margin-left: 4px;
position: relative;
top: -100%;
transition: all 0.3s linear 0.2s;
}
.box:hover .title{
transition-delay: 0.5s;
}
.box .description{
font-size: 14px;
font-style: italic;
margin: 15px 0;
padding: 0 10px;
position: relative;
top: -100%;
transition: all 0.3s linear 0.1s;
}
.box:hover .description{
transition-delay: 0.4s;
}
.box .read-more{
display: block;
width: 120px;
background: #29599c;
color: #fff;
padding: 10px 0;
border-radius: 5px;
margin: 0 auto;
position: relative;
top: -100%;
transition: all 0.3s linear 0s;
}
.box:hover .read-more{
transition-delay: 0.3s;
}
.box:hover .title,
.box:hover .description,
.box:hover .read-more{
top: 0;
}
@media only screen and (max-width:990px){
.box{ margin-bottom: 30px; }
}
@media only screen and (max-width:479px){
.box .box-content{ padding-top: 0; }
}
@media only screen and (max-width:360px){
.box .title{
padding-bottom: 10px;
margin-top: 10px;
}
.box .description{
margin: 7px 0;
}
}



Теги:
0

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

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