Hover Effect Style 9

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

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

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at.

read more

Vestibulum vel arcu sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at.

read more

Vestibulum vel arcu sit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at.

read more
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-9/img-1.jpg" alt=""/>
</div>
<div class="content">
<h3 class="title">Lorem ipsum dolor sit</h3>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at.</p>
<a href="#" class="read-more">read more</a>
</div>
</div>
</div>
</div>
</div>

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

.box{
overflow:hidden;
position:relative;
}
.box .box-img img{
width: 100%;
height: auto;
}
.box .content{
width: 100%;
height: 100%;
padding:60px 30px;
background:rgba(71,162,222,0.8);
position: absolute;
top: 0;
left: -100%;
transition:all 0.50s ease 0s;
}
.box:hover .content{
left:0;
}
.box .title{
font-size:18px;
color:#fff;
text-transform:capitalize;
font-weight: bold;
margin:0 0 30px 0;
}
.box .description{
font-size:16px;
color:#fff;
margin-bottom:35px;
}
.box .read-more{
padding:7px 15px;
background:#333;
color:#fff;
text-transform: capitalize;
}
@media only screen and (max-width: 990px){
.box{
margin-bottom:20px;
}
}
@media only screen and (max-width: 480px){
.box .content{
padding: 20px 30px;
}
}



Теги:
0

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

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