Hover Effect Style 10

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

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

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur.

Vestibulum vel arcu

Lorem ipsum dolor sit amet, consectetur.

Vestibulum vel arcu

Lorem ipsum dolor sit amet, consectetur.

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

<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="box">
<div class="box-img">
<img src="https://fokit.ru/demo/images/hover-effect/hover-effect-style-10/img-1.jpg" alt=""/>
</div>
<div class="content">
<h3 class="title">Lorem ipsum dolor</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur. </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{
position:relative;
overflow: hidden;
}
.box .box-img{
transform: translateX(0px);
transition:transform 0.40s linear ;
}
.box:hover .box-img{
transform: translateX(100%);
}
.box .box-img img{
width: 100%;
height: auto;
}
.box .content{
position: absolute;
top:0;
right: 100%;
width:100%;
height:100%;
padding:5%;
text-align:center;
background:#e67e22;
transition:right 0.40s linear;
}
.box:hover .content{
right:0%;
}
.box .title{
font-size:18px;
text-transform:capitalize;
color:#fff;
margin: 5% 0 0;
}
.box .description{
color:#fff;
}
.box .title:after,
.box .description:after{
content: "";
border-bottom: 1px solid #fff;
display: block;
margin:3% 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 не будет опубликован. Обязательные поля помечены *