Hover Effect Style 96

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

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

willimson

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra nibh ut tristique semper. Fusce.

Read More

Steve Thomas

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra nibh ut tristique semper. Fusce.

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-96/img-1.jpg"/>
<div class="box-icon">
<i class="fa fa-crosshairs"></i>
</div>
<div class="box-content">
<h4 class="title">willimson</h4>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra nibh ut tristique semper. Fusce.</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-96/img-2.jpg"/>
<div class="box-icon">
<i class="fa fa-crosshairs"></i>
</div>
<div class="box-content">
<h4 class="title">Kristiana</h4>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra nibh ut tristique semper. Fusce.</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
</div>
</div>
</div>

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

.box{
overflow: hidden;
position: relative;
}
.box:before{
content: "";
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(0,0,0,0) 25%, rgba(0,0,0,0.7));
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 0.3s linear 0.2s;
}
.box:hover:before{
opacity: 1;
transition-delay: 0.2s;
}
.box img{
width: 100%;
height: auto;
}
.box .box-icon{
border: 50px solid transparent;
border-bottom: 50px solid rgba(0,79,136,0.8);
border-right: 50px solid rgba(0,79,136,0.8);
position: absolute;
bottom: 0;
right: 0;
transform-origin: right;
transition: all 0.2s linear 0s;
}
.box:hover .box-icon{
transform: scaleX(0);
}
.box .box-icon i{
font-size: 30px;
color: #fff;
position: absolute;
top: 0;
left: 5px;
transition: all 0.01s linear 0.2s;
}
.box:hover .box-icon i{
opacity: 0;
transition-delay: 0s;
}
.box .box-content{
width: 100%;
height: 100%;
text-align: center;
color: #fff;
position: absolute;
top: 0;
left: 0;
transform: scaleY(0);
transition: all 0.2s linear 0s;
}
.box:hover .box-content {
transform: scaleY(1);
transition-delay: 0.45s;
}
.box .title{
width: 80%;
font-size: 22px;
font-weight: 400;
background: rgba(0, 78, 136,0.8);
text-transform: uppercase;
padding: 6px 0;
margin: 20% auto 0;
position: relative;
}
.box .title:before{
content: "";
display: block;
border: 20px solid transparent;
border-top: 20px solid  rgba(0, 78, 136,0.8);
position: absolute;
top: 100%;
left: 42%;
}
.box .description{
width: 100%;
font-size: 14px;
font-weight: 400;
background:  rgba(0, 78, 136,0.8);
margin: 40px auto 0;
padding: 6px 10px;
}
.box .read-more{
display: inline-block;
font-size: 15px;
color: #fff;
background: #ed875c;
padding: 7px 20px;
margin: 30px auto 0;
box-shadow: inset 0 0 7px 1px rgba(0,0,0,0.4);
border-radius: 5px;
}
@media only screen and (max-width:990px){
.box{ margin-bottom: 30px; }
}
@media only screen and (max-width:360px){
.box .title{ margin: 10% auto 0; }
}



Теги:
0

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

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