Hover Effect Style 11

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

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

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi.

Vestibulum vel arcu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi.

заговолокing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi.

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

<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="box">
<div class="box-img">
<img src="https://fokit.ru/demo/images/hover-effect/hover-effect-style-11/img-1.jpg" alt=""/>
</div>
<div class="content">
<h3 class="title">Lorem ipsum dolor</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi.</p>
<ul class="social-links">
<li><a href="#" class="fab fa-facebook"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
<li><a href="#" class="fab fa-linkedin"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>

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

.box{
border:5px solid #e8c575;
border-radius:50%;
position:relative;
overflow: hidden;
}
.box .box-img{
transform: rotateX(0deg);
transition:all 0.40s linear 0s;
}
.box:hover .box-img{
transform: rotateX(180deg);
}
.box .box-img img{
width:100%;
height: auto;
border-radius:50%;
}
.box .content{
width:100%;
height:100%;
position: absolute;
top:0;
padding:5%;
border-radius:50%;
text-align:center;
z-index:-10;
background:#e67e22;
transform:rotateX(-180deg);
transition:transform 0.40s linear;
}
.box:hover .content{
transform:rotateX(0deg);
z-index:0;
}
.box .title{
color: #fff;
font-size: 20px;
margin: 32% 0 0;
text-transform: capitalize;
}
.box .description{
color:#fff;
line-height:23px;
}
.box .title:after,
.box .description:after{
content: "";
border-bottom: 1px solid #fff;
display: block;
margin:10px auto;
width: 57%;
}
.box .social-links{
padding:0;
margin:0;
}
.box .social-links li{
list-style:none;
display:inline-block;
margin-right:15px;
}
.box .social-links li a{
color:#fff;
font-size:18px;
}
@media only screen and (max-width: 990px) {
.box{
margin-bottom:20px;
}
}



Теги:
0

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

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